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

}

 

posted @ 2019-03-21 17:04  sundaysios  阅读(1539)  评论(0编辑  收藏  举报