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];

}

gauge gauge

Answer 1

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

要获得最流畅的针动画效果，请勿使用一系列图像。从UIImageView中的单针图像开始，视图以背景刻度盘图像为中心。然后使用转换变换来更改UIImageView图层的transform属性。

将几何图形排成一行后，使用“核心动画”为变换设置动画，使其在适当的角度范围内变化。

假设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];
}

如何创建流畅的图像动画

1 个答案: