美文网首页
粒子动画

粒子动画

作者: SoManyDumb | 来源:发表于2016-08-24 22:16 被阅读73次

    粒子动画

    效果:随机绘制一条路径,点击开始按钮,粒子动画

    实现思路

    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];
    

    相关文章

      网友评论

          本文标题:粒子动画

          本文链接:https://www.haomeiwen.com/subject/zcmosttx.html