UIImageView iOS 的类似节拍器的动画

发布于 2024-12-18 00:14:45 字数 959 浏览 0 评论 0原文

我想创建一个图像动画，使图像来回摆动，就像节拍器一样。动画的目标是模拟类似“旋转”的效果。想象一下只有上半部分，箭头会来回移动，直到停在目标上。在此处输入图像描述

到目前为止，我已经能够让箭头来回移动，但是锚点动画是图像的中心。我希望该锚点位于图像的底部中心。为了模拟节拍器，锚点不能位于当前位置。我该如何进行此更改？动画代码如下：

#define RADIANS(degrees) ((degrees * M_PI) / 180.0)


CGAffineTransform leftWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(90));
CGAffineTransform rightWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-90));

arrow.transform = leftWobble;  // starting point

[UIView beginAnimations:@"wobble" context:(__bridge void *)arrow];
[UIView setAnimationRepeatAutoreverses:YES]; // important
[UIView setAnimationRepeatCount:10];
[UIView setAnimationDuration:.5];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(wobbleEnded:finished:context:)];

arrow.transform = rightWobble; // end here & auto-reverse

[UIView commitAnimations];

原文

I'd like to create an animation of an image that makes the image swing back and forth, much like a metronome. The goal of the animation is to simulate a "spinner" like effect. Imagine this with just the top half, the arrow will move back and forth until it stops on it's target. enter image description here

So far I've been able to get the arrow to move back and forth, however the anchor point of the animation is the center of the image. I'd like that anchor to be the bottom center of the image. In order to simulate a metronome, the anchor can't be where it currently is. How do I go about making this change? The animation code is below:

#define RADIANS(degrees) ((degrees * M_PI) / 180.0)


CGAffineTransform leftWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(90));
CGAffineTransform rightWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-90));

arrow.transform = leftWobble;  // starting point

[UIView beginAnimations:@"wobble" context:(__bridge void *)arrow];
[UIView setAnimationRepeatAutoreverses:YES]; // important
[UIView setAnimationRepeatCount:10];
[UIView setAnimationDuration:.5];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(wobbleEnded:finished:context:)];

arrow.transform = rightWobble; // end here & auto-reverse

[UIView commitAnimations];

分享到QQ

分享到微博

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

发布评论

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

清秋悲枫 2024-12-25 00:14:45

CALayer 有一个 anchorPoint 属性，您可以将其设置为箭头图像的底部。

Apple 有一个名为 Metronome 的 iOS 示例项目可以执行此操作。我似乎无法再在网上找到它，所以也许它已被删除，但这里是其中的代码片段：

    // Set up the metronome arm.
    metronomeArm = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"metronomeArm.png"]];

    // Move the anchor point to the bottom middle of the metronomeArm bounds, so rotations occur around that point.
    metronomeArm.layer.anchorPoint = CGPointMake(0.5, 1.0);

CALayer has an anchorPoint property that you can set to the bottom of your arrow image.

Apple had an iOS sample project called Metronome that does this. I can't seem to find it online anymore so perhaps it has been removed, but here is a code snippet from it:

    // Set up the metronome arm.
    metronomeArm = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"metronomeArm.png"]];

    // Move the anchor point to the bottom middle of the metronomeArm bounds, so rotations occur around that point.
    metronomeArm.layer.anchorPoint = CGPointMake(0.5, 1.0);

回复收藏 0 原文

~没有更多了~