核心动画之 CAKeyframeAnimation

最新推荐文章于 2024-05-31 15:59:00 发布

Sophie_zhu

最新推荐文章于 2024-05-31 15:59:00 发布

阅读量285

点赞数

分类专栏：动画文章标签：动画

本文链接：https://blog.csdn.net/u014234867/article/details/52624772

版权

动画专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.概述

1.CAKeyframeAnimation与CABasicAnimation同是继承自           
  CAPropertyAnimation   
2.CAKeyframeAnimation与CABasicAnimation的区别主要是：   
  CABasicAnimation只能从一个数值（fromValue）变到另一个数值   
 （toValue），而CAKeyframeAnimation会使用一个NSArray保存这些   
  数值

2.重要属性

@property(nullable, copy) NSArray *values  ：  就是上述的
   NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在
   指定的时间(duration)内，依次显示values数组中的每一个关键帧   

@property(nullable) CGPathRef path：可以设置一个CGPathRef
     \CGMutablePathRef,让层跟着路径移动。path只对CALayer的
      anchorPoint和position起作用。如果你设置了path，那么
      values将被忽略。   

@property(nullable, copy) NSArray<NSNumber *> *keyTimes：
  可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes
  中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时
  候,各个关键帧的时间是平分的。

3.示例

1.values示例

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //scale
//    NSValue *value1 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 0.1)];
//    NSValue *value2 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5,0.5)];
//    NSValue *value3 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9,0.9,0.9)];
    //position
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(120, 100)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(150, 150)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(120, 120)];
    animation.values = @[value1,value2,value3,value2,value1];
    animation.duration = 2.0f;
    [self.aniView.layer addAnimation:animation forKey:@"positionAnimation"];

帧动画values演示

2.path示例

 //贝塞尔曲线
    CAKeyframeAnimation *animatin = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animatin.duration = 2.0;
//    UIBezierPath *bezier = [UIBezierPath bezierPathWithRect:CGRectMake(30, 100, self.view.bounds.size.width-60, 100)];
//    UIBezierPath *bezier = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(30, 100, self.view.bounds.size.width-60, 100) cornerRadius:10];
    UIBezierPath *bezier = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:self.view.frame.size.width/2 startAngle:M_PI_2 endAngle:2*M_PI clockwise:YES];
    bezier.lineWidth = 1.0f;
    animatin.path = bezier.CGPath;
    [self.aniView.layer addAnimation:animatin forKey:nil];

path 路径演示

3.keyTimes属性

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    NSValue *value1 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 0.1)];
    NSValue *value2 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5,0.5)];
    NSValue *value3 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9,0.9,0.9)];
    animation.values = @[value1,value2,value3,value2,value1];
    animation.duration = 2.0f;
    animation.keyTimes = @[@0.1,@0.5,@0.2,@0.1,@0.1];
    [self.aniView.layer addAnimation:animation forKey:@"scaleAnimation"];