一. 示意图

    绘画出一条线,点击开始有很多粒子绕着线运动,点击重绘消除粒子和线

二. 实现代码

    设计思路:自定义一个View来描述控制器的View,在View加载过程中进行初始化,给View添加手势(UIPanGestureRecognizer),将自定义View转成复制层,创建一个粒子层,添加到复制层上,并保存粒子

    监听滑动手势,记录起始点,移动过程中添加直线并重绘

三. 代码实现

1. 自定义View来描述控制器View,将控制器View转为复制层

1. + (Class)layerClass
2. {
3. return [CAReplicatorLayer class];
4. }

2. 在加载控制器View初始化

初始化过程中创建滑动手势/创建复制层和粒子层

设置复制层相关属性:赋值个数/动画延迟时间

1. - (void)awakeFromNib
2. {
3. [self setup];
4. }
6. - (void)setup
7. {
8. // 1.创建手势
9. UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
10. // 2.添加手势
11. [self addGestureRecognizer:pan];
12. // 3.创建粒子复制层
13. CAReplicatorLayer *copyLayer = (CAReplicatorLayer *)self.layer;
14. copyLayer.instanceCount = 30;
15. copyLayer.instanceDelay = 0.25;
17. CALayer *layer = [[CALayer alloc] init];
18. layer.frame = CGRectMake(-10, 0, 10, 10);
19. layer.backgroundColor = [UIColor redColor].CGColor;
20. [copyLayer addSublayer:layer];
21. self.dotlayer = layer;
22. }

3. 将创建出来的粒子保存,设置一个UIBezierPater属性

1. /** 路径 */
2. @property (nonatomic, strong) UIBezierPath *path;
4. /** 粒子 */
5. @property (nonatomic, weak) CALayer *dotlayer;

4. 监听手势进行绘线

1. // 监听手势
2. - (void)pan:(UIPanGestureRecognizer *)pan
3. {
4. // 获取当前点
5. CGPoint curP = [pan locationInView:self];
8. if (pan.state == UIGestureRecognizerStateBegan) {
   // 开始滑动
10. // 绘制起始点
11. [self.path moveToPoint:curP];
13. } else if (pan.state == UIGestureRecognizerStateChanged) {
14. // 添加直线
15. [self.path addLineToPoint:curP];
16. // 重绘
17. [self setNeedsDisplay];
18. }
20. }

5. UIBezierPater路径懒加载 

1. // 路径懒加载
2. - (UIBezierPath *)path
3. {
4. if (!_path) {
5. UIBezierPath *path = [UIBezierPath bezierPath];
7. _path = path;
8. }
9. return _path;
10. }

6. 绘制

1. // 绘制
2. - (void)drawRect:(CGRect)rect {
4. [self.path stroke];
5. }

7. 线绘制完后点击开始,创建帧动画

1. - (IBAction)start {
2. // 1.创建帧动画
3. CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
4. anim.keyPath = @"position";
6. anim.path = self.path.CGPath;
8. anim.repeatCount = MAXFLOAT;
10. anim.duration = 3;
12. [self.dotlayer addAnimation:anim forKey:nil];
14. }

8. 点击重绘

1. - (IBAction)redraw {
3. // 删除所有动画
4. [self.dotlayer removeAllAnimations];
6. // 销毁路径
7. [self.path removeAllPoints];
9. // 重绘
10. [self setNeedsDisplay];
12. }