iOS动画之粒子效果

04.粒子动画

1.效果：

随机绘制一条路径，点击开始按钮，粒子动画

2.实现思路

1.搞个画板绘制路径，自定义view

2.给自定义view添加pan手势，和创建复制图层和圆形图层，只需要设置一次，在awakeFromNib方法中设置。

// 添加pan手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];

[self addGestureRecognizer:pan];

// 创建复制图层
CAReplicatorLayer *repLayer = [CAReplicatorLayer layer];

repLayer.frame = self.bounds;

[self.layer addSublayer:repLayer];

// 创建粒子图层
CALayer *layer = [CALayer layer];

layer.cornerRadius = 5;

layer.frame = CGRectMake(-100, 10, 10, 10);

layer.backgroundColor = [UIColor whiteColor].CGColor;

[repLayer addSublayer:layer];

_dotLayer = layer;

3.因为核心动画只能设置一个路径，因此只能创建一个路径，懒加载路径。

- (UIBezierPath *)path
{
if (_path == nil) {
_path = [UIBezierPath bezierPath];
}

return _path;
}

4.在一开始拖动的时候，保存路径起点，设置路径起点，拖动的时候每次添加线到某个点。

CGPoint curP = [pan locationInView:self];
if (pan.state == UIGestureRecognizerStateBegan) {

_startP = curP;

[self.path moveToPoint:_startP];

}

[self.path addLineToPoint:curP];

[self setNeedsDisplay];

5.路径绘制好了，点击开始按钮的时候，添加动画到图层

CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

anim.keyPath = @"position";
anim.duration = 4;
anim.path = self.path.CGPath;

anim.repeatCount = MAXFLOAT;

[_dotLayer addAnimation:anim forKey:@"anim"];
anim.delegate = self;

6.复制图层

repLayer.instanceCount = 20;
repLayer.instanceDelay = 4 / 20.0;

// 设置子层颜色
repLayer.instanceColor = [UIColor colorWithRed:0 green:1 blue:0 alpha:1].CGColor;

// 设置子层颜色绿色通道偏移量
repLayer.instanceGreenOffset = -0.03;

7.重绘

清空路径，重新绘制，移除图层动画。

_path = nil;
[_dotLayer removeAnimationForKey:@"anim"];
[self setNeedsDisplay];

3.全部代码

#import "DrawView.h"

@interface DrawView ()

@property (nonatomic, strong) UIBezierPath *path;

@property (nonatomic, assign) CGPoint startP;

@property (nonatomic, strong)  CALayer *dotLayer;
@property (nonatomic, strong)  CAReplicatorLayer *repLayer;
@property (nonatomic, strong)  CAKeyframeAnimation *anim;

@end

@implementation DrawView
- (UIBezierPath *)path
{
if (_path == nil) {
_path = [UIBezierPath bezierPath];
}
return _path;
}

- (CAReplicatorLayer *)repLayer
{
if (_repLayer == nil) {
_repLayer = [CAReplicatorLayer layer];
_repLayer.instanceCount = 20;
_repLayer.instanceDelay = 4 / 20.0;
_repLayer.frame = self.bounds;
// 设置子层颜色
_repLayer.instanceColor = [UIColor colorWithRed:0 green:1 blue:0 alpha:1].CGColor;
// 设置子层颜色绿色通道偏移量
_repLayer.instanceGreenOffset = -0.03;

}
return _repLayer;
}

- (CALayer *)dotLayer
{
if (_dotLayer == nil) {
// 创建粒子图层
_dotLayer = [CALayer layer];
_dotLayer.cornerRadius = 5;
_dotLayer.frame = CGRectMake(-100, 10, 10, 10);
_dotLayer.backgroundColor = [UIColor whiteColor].CGColor;
}
return _dotLayer;
}
- (CAKeyframeAnimation *)anim
{
if (_anim == nil) {
_anim = [CAKeyframeAnimation animation];

_anim.keyPath = @"position";
_anim.duration = 4;

_anim.repeatCount = MAXFLOAT;
_anim.delegate = self;
}
return  _anim;
}

- (void)awakeFromNib
{
// 添加pan手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];

[self addGestureRecognizer:pan];

// 创建复制图层
[self.layer addSublayer:self.repLayer];
[self.repLayer addSublayer:self.dotLayer];}

- (void)reDraw
{
self.path = nil;
[self.dotLayer removeAnimationForKey:@"anim"];
[self setNeedsDisplay];
}

- (void)startAnim
{
self.anim.path = self.path.CGPath;
[self.dotLayer addAnimation:self.anim forKey:@"anim"];
}

- (void)pan:(UIPanGestureRecognizer *)pan
{
CGPoint curP = [pan locationInView:self];
if (pan.state == UIGestureRecognizerStateBegan) {
_startP = curP;
[self.path moveToPoint:_startP];
}

[self.path addLineToPoint:curP];
[self setNeedsDisplay];
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
[self.path stroke];
}

@end

4.Demo

https://github.com/Esdeath/ParticleEffects