iphone - 如何创建流畅的图像动画

Question

我有这个动画，其中有一个背景图像和 12 个中心针的图像。它运行正常，但每次显示图像和之后的图像时，我只希望它在图像之间平稳运行。我怎样才能做到这一点？

这是我当前的代码:

- (IBAction)startAnimation:(id)sender
{
    imgAnimation.frame = CGRectMake(0, 0, 184.5f, 172.5f);
    imgAnimation.center = CGPointMake(160, 164);
    imgAnimation.animationImages = [NSArray arrayWithObjects:
                                [UIImage imageNamed:@"pointer01.png"],
                                [UIImage imageNamed:@"pointer02.png"],
                                [UIImage imageNamed:@"pointer03.png"],
                                [UIImage imageNamed:@"pointer04.png"],
                                [UIImage imageNamed:@"pointer05.png"],
                                [UIImage imageNamed:@"pointer06.png"],
                                [UIImage imageNamed:@"pointer07.png"],
                                [UIImage imageNamed:@"pointer08.png"],
                                [UIImage imageNamed:@"pointer09.png"],
                                [UIImage imageNamed:@"pointer10.png"],
                                [UIImage imageNamed:@"pointer11.png"],
                                [UIImage imageNamed:@"pointer12.png"], nil];
    [imgAnimation setAnimationRepeatCount:5];
    [imgAnimation setAnimationDuration:4.0f];
    [imgAnimation startAnimating];

}

Answer 1

编辑 :我最初建议使用 UIView 动画，但它总是采用最短的路线，旋转 90 度而不是 270 度。试试这个，由 Can I use CGAffineTransformMakeRotation to rotate a view more than 360 degrees? 提供

要获得最流畅的针动画，请不要使用图像序列。从 UIImageView 中的单个针图像开始， View 以背景表盘图像为中心。然后更改transform UIImageView 层的属性，带有旋转变换。

排列好几何图形后，使用 Core Animation 动画变换通过适当的角度范围变化。

只是为了详细说明，假设 imgAnimation是一个 UIImageView:

- (IBAction)startAnimation:(id)sender
{
    // This assumes that the center of the needle image is the center of the dial.  If they aren't, it's probably simplest to resize the needle image so it is centered.
    imgAnimation.frame = CGRectMake(0, 0, 184.5f, 172.5f);
    imgAnimation.center = CGPointMake(160, 164);

    // The needle image used should show the needle pointing straight up, or some other known direction.
    imgAnimation.image = [UIImage imageNamed:@"pointer06.png"];
    // Position the needle in its position before animating.
    [imgAnimation.layer setTransform:CATransform3DMakeRotation(-M_PI*3/4, 0, 0, 1)];

    // Construct an animation moving the needle to its end position.
    // Mose of these properties should be self-explanatory.  Look up the CABasicAnimation Class Reference if not.
    CABasicAnimation *needleAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    needleAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    needleAnim.duration = 4;
    needleAnim.repeatCount = 5;
    needleAnim.autoreverses = YES;
    // Setting fillMode means that, once the animation finishes, the needle stays in its end position.
    needleAnim.fillMode = kCAFillModeForwards;
    needleAnim.removedOnCompletion = YES;
    needleAnim.toValue = [NSNumber numberWithFloat:M_PI*3/4];

    // Add the animation to the needle's layer.
    [senderView.layer addAnimation:needleAnim forKey:nil];
}