如何创建流畅的图像动画

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中的单针图像开始，视图以背景拨号图像为中心。然后使用旋转变换更改UIImageView图层的transform属性。

将几何图形排列起来后，使用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]; 
}