为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

忽然笑 2019-08-09 14:28:00
如何沿曲线路径设置视图或图像的移动动画?我正在开发一个商务应用程序。当我将一个项目添加到购物车时,我想创建一个效果,其中项目的图像遵循弯曲的路径,最终在购物车选项卡上。如何沿这样的曲线创建图像动画?
查看完整描述

3 回答

?
互换的青春

TA贡献1797条经验 获得超6个赞

为了扩展Nikolai所说的,处理这个问题的最佳方法是使用Core Animation为Bezier路径上的图像或视图的运动设置动画。这是使用CAKeyframeAnimation完成的。例如,我使用以下代码将视图图像设置为图标以指示保存(如此应用程序视频中所示):

首先导入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];


查看完整回答
反对 回复 2019-08-09
  • 3 回答
  • 0 关注
  • 725 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信