湾曲したパスに沿ってビューまたは画像の動きをアニメーション化するにはどうすればよいですか？

Question

私はコマースアプリケーションを開発中です。ショッピングカートにアイテムを追加すると、アイテムのイメージが湾曲したパスをたどり、カートタブで終わるエフェクトを作成したいと考えています。

このようなカーブに沿って画像のアニメーションを作成するにはどうすればよいですか？

Answer 1

CAKeyframeAnimationを使用して、UIViewのcenterプロパティをアニメートできます。プログラミングガイドのCoreAnimationを参照してください。

Answer 2

これを処理する最善の方法は、コアアニメーションを使用してベジェパスに沿って画像またはビューの動きをアニメーション化することです。これは、CAKeyframeAnimationを使用して実行されます。例えば、私は（video for this applicationに見られるように）保存を示すために、アイコンにビューの画像をアニメーション化するために、次のコードを使用した：

すべてのインポートQuartzCoreヘッダファイルの

まず #import <QuartzCore/QuartzCore.h>

UIImageView *imageViewForAnimation = [[UIImageView alloc] initWithImage:imageToAnimate]; 
imageViewForAnimation.alpha = 1.0f; 
CGRect imageFrame = imageViewForAnimation.frame; 
//Your image frame.origin from where the animation need to get start 
CGPoint viewOrigin = imageViewForAnimation.frame.origin; 
viewOrigin.y = viewOrigin.y + imageFrame.size.height/2.0f; 
viewOrigin.x = viewOrigin.x + imageFrame.size.width/2.0f; 

imageViewForAnimation.frame = imageFrame; 
imageViewForAnimation.layer.position = viewOrigin; 
[self.view addSubview:imageViewForAnimation]; 

// Set up fade out effect 
CABasicAnimation *fadeOutAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"]; 
[fadeOutAnimation setToValue:[NSNumber numberWithFloat:0.3]]; 
fadeOutAnimation.fillMode = kCAFillModeForwards; 
fadeOutAnimation.removedOnCompletion = NO; 

// Set up scaling 
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:@"bounds.size"]; 
[resizeAnimation setToValue:[NSValue valueWithCGSize:CGSizeMake(40.0f, imageFrame.size.height * (40.0f/imageFrame.size.width))]]; 
resizeAnimation.fillMode = kCAFillModeForwards; 
resizeAnimation.removedOnCompletion = NO; 

// Set up path movement 
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
pathAnimation.calculationMode = kCAAnimationPaced; 
pathAnimation.fillMode = kCAFillModeForwards; 
pathAnimation.removedOnCompletion = NO; 
//Setting Endpoint of the animation 
CGPoint endPoint = CGPointMake(480.0f - 30.0f, 40.0f); 
//to end animation in last tab use 
//CGPoint endPoint = CGPointMake(320-40.0f, 480.0f); 
CGMutablePathRef curvedPath = CGPathCreateMutable(); 
CGPathMoveToPoint(curvedPath, NULL, viewOrigin.x, viewOrigin.y); 
CGPathAddCurveToPoint(curvedPath, NULL, endPoint.x, viewOrigin.y, endPoint.x, viewOrigin.y, endPoint.x, endPoint.y); 
pathAnimation.path = curvedPath; 
CGPathRelease(curvedPath); 

CAAnimationGroup *group = [CAAnimationGroup animation]; 
group.fillMode = kCAFillModeForwards; 
group.removedOnCompletion = NO; 
[group setAnimations:[NSArray arrayWithObjects:fadeOutAnimation, pathAnimation, resizeAnimation, nil]]; 
group.duration = 0.7f; 
group.delegate = self; 
[group setValue:imageViewForAnimation forKey:@"imageViewBeingAnimated"]; 

[imageViewForAnimation.layer addAnimation:group forKey:@"savingAnimation"]; 

[imageViewForAnimation release];