CoreAnimation-06-CAKeyframeAnimation

概述

---

• 简介
  • CAKeyframeAnimation又称关键帧动画
  • CAKeyframeAnimation是抽象类CAPropertyAnimation的子类，可以直接使用
  • 通过values与path两个属性指定动画属性
• 注意事项
  • 若指定了path属性，则values属性将被忽略
  • CABasicAnimation相当于只有两个关键帧的CAKeyframeAnimation

关键帧动画的常用属性

---

• values（NSArray *）
  • 存放关键帧的多个值
  • 类似于CABasicAnimation的fromValue与toValue值
• path（CGPathRef）
  • 动画的执行路径
  • 可以通过绘图的方式绘制路径
• keyTimes（NSArray<NSNumber > ）
  • 每个关键帧的执行时间
  • 类型为NSNumber类型
  • 若不指定，则所有的关键帧平分动画的duration时长
• timingFunctions（NSArray<CAMediaTimingFunction > ）
  • 速度控制函数数组
• calculationMode（NSString *）
  • 指定关键帧的动画属性
  • 若指定该值，则keyTimes与timingFunctions属性值将被忽略
  • 默认为：kCAAnimationLinear
• rotationMode（NSString *）
  • 指定旋转模式，默认为nil

示例

---

• 效果图

  

• 实现思路
  • 通过监听执行动画的UI控件的触摸事件来绘制贝瑟尔曲线
  • 创建关键帧动画，指定执行动画的keyPath属性
  • 将绘制的贝瑟尔曲线作为动画的执行路径
  • 将动画添加到指定的图层上
• 实现步骤（自定义UIView的子类）
  • 使用成员属性保存贝瑟尔路径

  @property (nonatomic, strong) UIBezierPath *path;

  • 监听触摸事件的状态，绘制贝瑟尔曲线
    • 开始

    //确定起点
    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
    {
        //获取当前触摸点
        UITouch *touch = [touches anyObject];
        CGPoint curretnPoint = [touch locationInView:self];
    
        //创建路径
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:curretnPoint];
        //保存路径
        self.path = path;
    }

    • 移动

    //添加线条
    - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
    {
        //获取当前触摸点
        UITouch *touch = [touches anyObject];
        CGPoint currentPoint = [touch locationInView:self];
        //添加线条
        [self.path addLineToPoint:currentPoint];
        //重绘，将曲线显示到图层上
        [self setNeedsDisplay];
    }

    • 结束（创建动画）

    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
    {
        //创建动画
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    
        //指定执行动画的属性，
        animation.keyPath = @"position";
        //设置动画的执行路径
        animation.path = self.path.CGPath;
    
        //设置动画的执行时间
        animation.duration = 1;
        //设置动画的重复次数
        animation.repeatCount = MAXFLOAT;
    
        //将动画添加到对应的图层上
        [[[self.subviews firstObject] layer] addAnimation:animation forKey:nil];
    }

  • 将路径显示到图层上

  //绘制路径
  - (void)drawRect:(CGRect)rect
  {
      [self.path stroke];
  }

转载于:https://www.cnblogs.com/theDesertIslandOutOfTheWorld/p/4772193.html