使用 Core-Animation 在 iPhone 上创建挥杆计

发布于 2024-09-14 01:25:10 字数 2141 浏览 2 评论 0 原文

我正在尝试创建一个挥杆计,有点像高尔夫游戏中使用的挥杆计,用户按住按钮开始挥杆,在顶点释放以确定力量,此时“挥杆”反转方向,并且用户在向下的过程中再次点击以设置精度。

我不想使用一个充满的条形图,而是使用一个从左向右摆动的钟摆。摆锤在第一次敲击的地方留下一个标记(功率),在第二次敲击的地方留下另一个标记(精度)。

我的第一个问题是旋转钟摆。我一直在阅读这些关于旋转 UIImageView 的帖子 - 这里这里这里但我希望我能够得到一些额外的建议:)

首先,旋转 UIImageView 是解决这个问题的最佳方法吗?我正在考虑通过将摆锤的坐标与正确点的坐标进行比较来确定摆锤与正确点的距离。但要使其工作, UIImageView 必须进行物理移动,我不确定它是否会移动?另外,如何使 UIImageView 围绕特定点而不是中心点旋转。或者我应该将摆锤的边界框变大,以便中心点位于正确的位置。如何在用户点击(或释放)按钮的地方留下“印记”?

任何有关解决此问题的最佳方法的一般帮助都将非常感激:)也许我的问题有点模糊和笼统,但我希望有人会喜欢这个挑战:)

谢谢!

迈克尔

更新:

好的,我已经尝试了以下两种方法,现在两种方法都有效。

    - (void)viewDidLoad {
        pendulum.image = [UIImage imageNamed:@"winkOpen.png"];
        [self swingPendulum];
    }

    - (void)swingPendulum {
    CABasicAnimation *rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = [NSNumber numberWithFloat:degreesToRadian(180)]; 
    rotationAnimation.duration = 0.75;
    rotationAnimation.repeatCount = 1.0; 
    rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    [pendulum.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
}


    /*
    - (void)swingPendulum {
        [UIView setAnimationBeginsFromCurrentState:YES];
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:1];
        pendulum.transform = CGAffineTransformMakeRotation(degreesToRadian(180));
        [UIView setAnimationDelegate:self];
        [UIView commitAnimations];
    }
    */

现在我不确定哪种方法更好,但对于第一种方法,钟摆会在 0 度以上而不是低于 0 度摆动,所以我会采用这种方法。

现在我需要确定钟摆停止的位置并反转摆动...但也许我会将这些作为单独的问题发布,因为这有点混乱!将来我会确保我的问题更加具体:)

I'm trying to create a swingometer, a bit like the ones used in golf games, where the user holds a button to start a swing, releases at the apex to determine power, at which point the 'swing' reverses direction, and the user taps again on the way down to set the accuracy.

Rather than having a bar that fills up, I would like to use a pendulum that swings from left to right. The pendulum leaves a mark where it is first tapped (power) and another mark where it is tapped for the second time (accuracy).

My first problem is rotating the pendulum. I've been reading these posts about rotating a UIImageView - here , here and here but I was hoping I might be able to get a little extra advice :)

First of all, is rotating a UIImageView the best way to approach this? I was thinking of determining how close the pendulum is to the correct spot by comparing its coordinates to the coordinates of the correct spot. But for this to work, the UIImageView would have to physically move, which I'm not sure it does? Also, how does one make a UIImageView rotate around a specific spot, rather than the centre point. Or should I just make the pendulum's bounding box bigger so the centre point is in the correct position. And how can I leave a 'stamp' where the user hits (or releases) the button?

Any general help regarding the best way to approach this would be very much appreciated :) Perhaps my question is a little vague and generalised, but I'm hoping someone might like the challenge :)

Thanks!!

Michael

UPDATE:

Ok I've tried the following two approaches, both of which now work.

    - (void)viewDidLoad {
        pendulum.image = [UIImage imageNamed:@"winkOpen.png"];
        [self swingPendulum];
    }

    - (void)swingPendulum {
    CABasicAnimation *rotationAnimation;
    rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = [NSNumber numberWithFloat:degreesToRadian(180)]; 
    rotationAnimation.duration = 0.75;
    rotationAnimation.repeatCount = 1.0; 
    rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    [pendulum.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
}


    /*
    - (void)swingPendulum {
        [UIView setAnimationBeginsFromCurrentState:YES];
        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:1];
        pendulum.transform = CGAffineTransformMakeRotation(degreesToRadian(180));
        [UIView setAnimationDelegate:self];
        [UIView commitAnimations];
    }
    */

Now I'm not sure which approach is better, but with the first, the pendulum swings above 0 degrees rather than below it, so I'm going with that.

Now I need to determine where the pendulum stops and reverse the swing... But maybe I'll post those as separate questions since this is getting a bit cluttered! I'll make sure my questions are more specific in future :)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

意中人 2024-09-21 01:25:10

对于动画,您将需要查看变换。请参阅Quartz 2D 编程指南:变换。

您不应使用视图的实际像素位置进行计算。如果这样做,屏幕尺寸和/或分辨率的更改将需要完全重写。相反,创建运动和位置的抽象数据模型,在抽象模型中执行计算。然后将抽象坐标转换为当前显示器的坐标。

与首先计算它应该出现的位置相比,让 imageView 显示在您想要的位置相对简单。你必须做出正确的动作。记住,“如果你没有那种挥杆能力,那也没有任何意义!”

For the animation, you will want to look at transforms. See the Quartz 2D programming guide:Transforms.

You should not use the actual pixel location of the view for your calculations. If you do, changes in screen dimensions and/or resolution will require a complete rewrite. Instead create an abstract data model of the motion and location, perform your calculations within the abstract model. Then translate the abstract coordinates to the coordinates of the current display.

Getting the imageView to appear where you want it is relatively trivial compared to calculating where it should be in the first place. You have to get the motion right. Remember, "it don't mean thing if you ain't got that swing!"

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文