如何創建流暢的圖像動畫

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