CAKeyframeAnimation的详细用法
https://www.cnblogs.com/hero11223/p/7211567.html
简单的创建一个带路径的动画效果,比较粗糙,不过事先原理都是一样的,
代码如下:
1,创建动画所需的view
-(void)creatView
{
moveView = [UIView new];
moveView.backgroundColor = [UIColor purpleColor];
moveView.frame = CGRectMake(0, 0, 30, 30);
[self.view addSubview:moveView];
}
2,动画的实现:
方法一:
-(void)startAnimation
{
// 方法一 用法1 Value方式
//创建动画对象
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//设置value
NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 300)];
NSValue *value6=[NSValue valueWithCGPoint:CGPointMake(200, 400)];
animation.values=@[value1,value2,value3,value4,value5,value6];
//重复次数 默认为1
animation.repeatCount=MAXFLOAT;
//设置是否原路返回默认为不
animation.autoreverses = YES;
//设置移动速度,越小越快
animation.duration = 4.0f;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.delegate=self;
//给这个view加上动画效果
[moveView.layer addAnimation:animation forKey:nil];
}
方法二:
// 用法2 Path方式
//创建动画对象
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//创建一个CGPathRef对象,就是动画的路线
CGMutablePathRef path = CGPathCreateMutable();
//自动沿着弧度移动
CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 200, 200, 100));
//设置开始位置
CGPathMoveToPoint(path,NULL,100,100);
//沿着直线移动
CGPathAddLineToPoint(path,NULL, 200, 100);
CGPathAddLineToPoint(path,NULL, 200, 200);
CGPathAddLineToPoint(path,NULL, 100, 200);
CGPathAddLineToPoint(path,NULL, 100, 300);
CGPathAddLineToPoint(path,NULL, 200, 400);
//沿着曲线移动
CGPathAddCurveToPoint(path,NULL,50.0,275.0,150.0,275.0,70.0,120.0);
CGPathAddCurveToPoint(path,NULL,150.0,275.0,250.0,275.0,90.0,120.0);
CGPathAddCurveToPoint(path,NULL,250.0,275.0,350.0,275.0,110.0,120.0);
CGPathAddCurveToPoint(path,NULL,350.0,275.0,450.0,275.0,130.0,120.0);
animation.path=path;
CGPathRelease(path);
animation.autoreverses = YES;
animation.repeatCount=MAXFLOAT;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = 4.0f;
animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.delegate=self;
[moveView.layer addAnimation:animation forKey:nil];
}
按照上面的方法,即可实现一个动画,参照上面的逻辑可以实现添加购物车,删除等带路径的动画!
下面附一个添加购物车的动画效果:
1,创建动画view
-(void)relodata
{
self.addCartImg = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.frame.size.width/4, self.view.frame.size.height+10, 30, 30)];
self.addCartImg.hidden = true;
[self.view addSubview:self.addCartImg];
self.addCartImg.image = [UIImage imageNamed:@"3.jpg"];
}
2,具体动画的实现:
- (IBAction)clickAddShopCartBtn:(id)sender {
self.addCartImg.hidden = false;
// 创建动画对象
CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
// 创建一个CGPathRef对象,就是动画的路线
CGMutablePathRef path = CGPathCreateMutable();
// 设置开始位置
CGPathMoveToPoint(path, NULL, self.addCartImg.layer.position.x-40, self.addCartImg.layer.position.y-40);//移动到起始点
// 沿着路径添加四曲线点移动
CGPathAddQuadCurveToPoint(path, NULL, 100, 100, self.view.frame.size.width, 0);
keyframeAnimation.path = path;
keyframeAnimation.delegate = self;
CGPathRelease(path);
keyframeAnimation.duration = 0.7;
[self.addCartImg.layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];
// 旋转动画
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];
rotationAnimation.duration = 0.1;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 50;
// 为addCartImg添加旋转动画
[self.addCartImg.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
}
点击按钮,addCartImg会做一个旋转操作,并按照规定的路径进行移动,从而完成一个动画!
CGFloat width = 40;
UIImage *image = [UIImage imageNamed:@"a"];
self.addCartImg = [[UIImageView alloc] initWithFrame:CGRectMake(100, 200, width, width)];
self.addCartImg.image = image;
[self.view addSubview:self.addCartImg];
- (void)addCartAction{
//购物车旋转
self.addCartImg.hidden = false;
// 创建动画对象
CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
// 创建一个CGPathRef对象,就是动画的路线
CGMutablePathRef path = CGPathCreateMutable();
// 设置开始位置
CGPathMoveToPoint(path, NULL, self.addCartImg.layer.position.x-40, self.addCartImg.layer.position.y-40);//移动到起始点
// 沿着路径添加四曲线点移动
CGPathAddQuadCurveToPoint(path, NULL, 100, 100, self.view.frame.size.width, 0);
keyframeAnimation.path = path;
keyframeAnimation.delegate = self;
CGPathRelease(path);
keyframeAnimation.duration = 0.7;
[self.addCartImg.layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];
// 旋转动画
CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];
rotationAnimation.duration = 0.1;
rotationAnimation.cumulative = YES; //为true时在已经动画的基础上叠加动画
rotationAnimation.repeatCount = 50;
// 为addCartImg添加旋转动画
[self.addCartImg.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
}