粒子效果

04-粒子效果

整体思路:

 手指在屏幕上移动时, 绘制出一条路径.路径上面可以有多条线.当点击开始绘制时,很多粒子根据绘制的路径开始移动. 
 创建一个粒子添加到控制器的View,开始时让粒子的x坐标负的.在界面上看不到粒子. 
 让控制器的View成为一个画板.手指在上面绘制,使能够绘制多条线.绘制完毕后,添加一个
帧动画.
把画板上绘制的路径当作是帧动画的路径 .把帧动画添加给创建的粒子,使粒子能够根据路径做移动的动画. 
把当前的View的layer设置成为复制层,把粒子的份数设置30份,每个再设置一个延时动画,就会有一个个粒子移动的效果了.

实现方式:

1.创建路径,使控制器的View能够实现绘制多条线的功能.

保证要只有一条路径.所以路径只需要创建一份,在awakeFromNib方法中创建路径. 
添加完手势,判断手势的状态,每次开始移动的时, 让路径重新设置起点. 
手指移动的时候,添加一根线到当前手指所在的点.

实现代码为:

获取当前手指所在的点.
CGPoint curP = [pan locationInView:self];
if (pan.state == UIGestureRecognizerStateBegan) {
[self.path moveToPoint:curP]; }else{
[self.path addLineToPoint:curP];
[self setNeedsDisplay]; }

2.添加粒子

每一个粒子使用一个层来做.开始时让粒子的x值为负的. 
创建粒子 
CALayer *dotLayer = [CALayer layer];
dotLayer.frame = CGRectMake(-10, 0, 10, 10);
dotLayer.backgroundColor = [UIColor greenColor].CGColor;
self.dotLayer = dotLayer;
[self.layer addSublayer:dotLayer];

3.当点击开始时创建帧动画动画

CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
anim.path = self.path.CGPath;
anim.repeatCount = MAXFLOAT;
anim.duration = 2;
[self.dotLayer addAnimation:anim forKey:nil];

4.让当前控制器的view成为复制层.

+(Class)layerClass{
return [CAReplicatorLayer class]; }
复制是控件
让动画延时执 ,就会有动画的效果.
CAReplicatorLayer *repL = (CAReplicatorLayer *)self.layer;
repL.instanceCount = 30;
repL.instanceDelay = 0.2;