iOS-小Demo--简单篮球沿轨迹动画

<b><big>西北望乡何处是，东南见月几回圆。昨风一吹无人会，今夜清光似往年！</b>></big><白海师>

---

来句废话吧，今天好像是中秋啊！想起打球的时候，于是写一个篮球运动的轨迹动画吧，很简单！

效果图：

篮球轨迹运动.gif

---

实现思路：

• 通过贝塞尔创建一个轨迹 Path

• 使用 CAShapeLayer （根据 Path）绘制背景轨迹，当然也可以使用自定义的 View 画一个轨迹
• 使用 CAKeyframeAnimation 关键帧动画（根据 Path）完成篮球的运动
• 基础的知识点可以参考这个文章，关于动画和 Layer 层

补充：

• CAShapeLayer: 是一个可以通过矢量图形绘制图层的（CALayer）子类，我们可以通过创建 CGPath自定义的绘制出我们需要的图形，然后设置它的相关属性（strokeColor（画线颜色）、fillColor（填充颜色）、lineWidth（线宽））进行自动渲染！绘制的形状不需要闭合，我们可以在同一个图层绘制多个不一样的形状。

• CAKeyFramAnimation: 关键帧动画这个（CAAnimation）动画子类可以实现，某一属性按照一串的数值进行动画，就好像制作动画的时候一帧一帧的制作一样。
• 两个关键的属性：
  • Path： 这是一个 CGPathRef 对象，默认是空的，当我们创建好CAKeyframeAnimation的实例的时候，可以通过制定一个自己定义的path来让 某一个物体按照这个路径进行动画。**这个值默认是nil 当其被设定的时候 values 这个属性就被覆盖 **
  • Values: 一个数组，提供了一组关键帧的值， 当使用path的 时候 values的值自动被忽略。

---

上代码：

• 第一步： 创建轨迹路径 Path (依据个人口味创建)

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 400)]; // 起点
// 设置终点 和两个控制点（拐点）
[path addCurveToPoint:CGPointMake(400, 200) controlPoint1:(CGPointMake(120, 10)) controlPoint2:(CGPointMake(300, 20))];```

- 第二步：绘制运动路径轨迹
```code
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.path = path.CGPath;// 绘制路径
pathLayer.strokeColor = [UIColor redColor].CGColor;// 轨迹颜色
pathLayer.fillColor = [UIColor clearColor].CGColor;// 填充颜色
pathLayer.lineWidth = 5.0f; // 线宽

• 第三步：创建关键帧动画

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//pathAnimation.calculationMode = kCAAnimationPaced;// 我理解为节奏
 pathAnimation.fillMode = kCAFillModeForwards;
  pathAnimation.removedOnCompletion = NO;// 是否在动画完成后从 Layer 层上移除  回到最开始状态
  pathAnimation.duration = 3.0f;// 动画时间
  pathAnimation.repeatCount = 100;// 动画重复次数``` 
- 第四步： 创建需要动画的篮球
```code
UIImageView *basketball = [[UIImageView alloc] initWithFrame:(CGRectMake(0, 400, 80, 80))];
basketball.image = [UIImage imageNamed:@"basketball"];```

- 一曲终了，一一添加上！
```code
[self.view addSubview:basketball]; // 添加篮球
[basketball.layer addAnimation:pathAnimation forKey:nil ];// 添加动画
[self.view.layer addSublayer:pathLayer];// 绘制的轨迹