十五 iOS 之 粒子效果

费话不多说，直接看图
粒子效果图

实现思路

1、先创建一个画板，自定义一个view就好，用来绘制路径

2、创建路径，粒子图层，还有复制层

#pragma mark - 懒加载路径
-(UIBezierPath *)path
{
    if (_path == nil) {
        _path = [UIBezierPath bezierPath];
    }
    return _path;
}

#pragma mark - 懒加载点层
-(CALayer *)dotLayer
{
    if (_dotLayer == nil) {
        //创建小点点图层
        CALayer * layer = [CALayer layer];
        CGFloat wh = 10;
        //y值设为负数的作用是为了隐藏左上角显示的图层
        layer.frame = CGRectMake(0, -10, wh, wh);

        layer.cornerRadius = wh / 2;

        layer.backgroundColor = [UIColor redColor].CGColor;

        [_repLayer addSublayer:layer];

        _dotLayer = layer;

    }

    return _dotLayer;
}

#pragma mark - awakeFromNib
-(void)awakeFromNib
{
    [super awakeFromNib];
    //创建复制层
    CAReplicatorLayer * repL = [CAReplicatorLayer layer];

    repL.frame = self.bounds;
    [self.layer addSublayer:repL];


    _repLayer = repL;

}

3、在手势开始时设置起点，移动时添加线到当前点，并且执行路径

#pragma mark - touchesBegan:
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch * touch = [touches anyObject];
    //获取当前触摸点
    CGPoint curP = [touch locationInView:self];

        //设置起点
    [self.path moveToPoint:curP];


}

#pragma mark - touchesMoved:
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch * touch = [touches anyObject];

    CGPoint curP = [touch locationInView:self];

    //添加线到当前点
    [self.path addLineToPoint:curP];

    [self setNeedsDisplay];

    dotCount ++;

}

#pragma mark - drawRect:
- (void)drawRect:(CGRect)rect {

    //执行
    [_path stroke];

}

4、创建帧动画添加到粒子图层上，其中包括很关键的一步，给动画设置路径

#pragma mark - 开始动画
-(void)startAnim
{
//    NSLog(@"%s",__func__);

    //创建帧动画
    CAKeyframeAnimation * anim = [CAKeyframeAnimation animation];
    anim.keyPath = @"position";
    //给动画设置路径，这一步很关键
    anim.path = _path.CGPath;
    anim.duration = 5;
    anim.repeatCount = MAXFLOAT;
    //给图层添加动画
    [self.dotLayer addAnimation:anim forKey:nil];

    //复制子层
    _repLayer.instanceCount = dotCount;

    _repLayer .instanceDelay = 0.2;
}

5、重新绘制，清空路径，移除粒子图层

#pragma mark - 重绘
-(void)reDraw
{
    //清空绘图信息
    _path = nil;

    [self setNeedsDisplay];

    [_dotLayer removeFromSuperlayer];
    _dotLayer = nil;

    //清空点子层总数
    dotCount = 0;


}

github demo : ActiveDotDemo