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