如何沿曲线路径设置视图或图像的移动动画？

Question

如何沿曲线路径设置视图或图像的移动动画？

我正在开发一个商务应用程序。当我将一个项目添加到购物车时，我想创建一个效果，其中项目的图像遵循弯曲的路径，最终在购物车选项卡上。

如何沿这样的曲线创建图像动画？

Answer 1

为了扩展Nikolai所说的，处理这个问题的最佳方法是使用Core Animation为Bezier路径上的图像或视图的运动设置动画。这是使用CAKeyframeAnimation完成的。例如，我使用以下代码将视图图像设置为图标以指示保存（如此应用程序的视频中所示）：首先导入QuartzCore头文件&nbsp;#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 startCGPoint 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 effectCABasicAnimation *fadeOutAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];[fadeOutAnimation setToValue:[NSNumber numberWithFloat:0.3]];fadeOutAnimation.fillMode = kCAFillModeForwards;fadeOutAnimation.removedOnCompletion = NO;// Set up scalingCABasicAnimation *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 movementCAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];pathAnimation.calculationMode = kCAAnimationPaced;pathAnimation.fillMode = kCAFillModeForwards;pathAnimation.removedOnCompletion = NO;//Setting Endpoint of the animationCGPoint endPoint = CGPointMake(480.0f - 30.0f, 40.0f);//to end animation in last tab use&nbsp;//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];&nbsp;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];