来句废话吧,今天好像是中秋啊!想起打球的时候,于是写一个篮球运动的轨迹动画吧,很简单!
效果图:
实现思路:
- 通过贝塞尔创建一个轨迹 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];// 绘制的轨迹