美文网首页
CAEmitterLayer实现粒子动画雪花效果

CAEmitterLayer实现粒子动画雪花效果

作者: Fendouzhe | 来源:发表于2017-12-23 13:57 被阅读0次

    效果(gift掉帧显得卡,实际效果见GitHub):

    实现步骤:

    1 创建粒子Layer
        // 创建粒子Layer
        CAEmitterLayer *snowEmitter = [CAEmitterLayer layer];
        // 粒子发射位置
        snowEmitter.emitterPosition = CGPointMake(120,0);
        // 发射源的尺寸大小
        snowEmitter.emitterSize     = self.view.bounds.size;
        // 发射模式
        snowEmitter.emitterMode     = kCAEmitterLayerSurface;
        // 发射源的形状
        snowEmitter.emitterShape    = kCAEmitterLayerLine;
        snowEmitter.shadowOpacity = 1.0;
        snowEmitter.shadowRadius  = 0.0;
        snowEmitter.shadowOffset  = CGSizeMake(0.0, 0.0);
        // 粒子边缘的颜色
        snowEmitter.shadowColor  = [[UIColor whiteColor] CGColor];
        // 将粒子Layer添加进图层中
        [self.view.layer addSublayer:snowEmitter];
    
    2 创建粒子添加到CAEmitterLayer
        // 创建雪花类型的粒子
        CAEmitterCell *snowflake    = [CAEmitterCell emitterCell];
        // 粒子的名字
        snowflake.name = @"snow";
        // 粒子参数的速度乘数因子
        snowflake.birthRate = 20.0;
        // 粒子生命周期
        snowflake.lifetime  = 120.0;
        // 粒子速度
        snowflake.velocity  = 10.0;
        // 粒子的速度范围
        snowflake.velocityRange = 10;
        // 粒子y方向的加速度分量
        snowflake.yAcceleration = 2;
        // 周围发射角度
        snowflake.emissionRange = 0.5 * M_PI;
        // 子旋转角度范围
        snowflake.spinRange = 0.25 * M_PI;
        snowflake.contents  = (id)[[UIImage imageNamed:@"snow"] CGImage];
        // 设置雪花形状的粒子的颜色
        snowflake.color      = [[UIColor whiteColor] CGColor];
        snowflake.redRange   = 2.f;
        snowflake.greenRange = 2.f;
        snowflake.blueRange  = 2.f;
        snowflake.scaleRange = 0.6f;
        snowflake.scale      = 0.7f;
        // 添加粒子
        snowEmitter.emitterCells = @[snowflake];
    

    运行效果:


    3 给CAEmitterLayer创建遮盖
        UIImage *image      = [UIImage imageNamed:@"alpha"];
        _movedMask          = [CALayer layer];
        _movedMask.frame    = (CGRect){CGPointZero, image.size};
        _movedMask.contents = (__bridge id)(image.CGImage);
        _movedMask.position = self.view.center;
        snowEmitter.mask    = _movedMask;
    

    运行:


    4 创建拖拽的View添加拖动手势
       // 拖拽的View 和遮罩一样位置
        UIView *dragView = [[UIView alloc] initWithFrame:_movedMask.frame];
        [self.view addSubview:dragView];
        // 给dragView添加拖拽手势
        UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
        [dragView addGestureRecognizer:recognizer];
    
    5 实现拖动方法,拖动view也让遮罩一起拖动。
    - (void)handlePan:(UIPanGestureRecognizer *)recognizer {
        // 拖拽
        CGPoint translation    = [recognizer translationInView:self.view];
        recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                             recognizer.view.center.y + translation.y);
        [recognizer setTranslation:CGPointMake(0, 0) inView:self.view];
        
        // 关闭CoreAnimation实时动画绘制(核心)
        [CATransaction setDisableActions:YES];
        _movedMask.position = recognizer.view.center;
    }
    

    最终效果:


    源码已经放在GitHub,里面有更多动画效果,在不断更新,欢迎下载查看,有帮助可以star,谢谢!
    不熟悉CAEmitterLayer属性的可参见文章《CAEmitterLayer属性详解》

    相关文章

      网友评论

          本文标题:CAEmitterLayer实现粒子动画雪花效果

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