美文网首页
CAEmitterLayer实现粒子效果(仿皮皮虾点赞效果)

CAEmitterLayer实现粒子效果(仿皮皮虾点赞效果)

作者: 格雷s | 来源:发表于2020-05-12 19:14 被阅读0次

最近学习GLSL粒子效果,想到了喜爱的皮皮虾里的点赞动效,于是先用CAEmitterLayer来实现点赞的效果,后面有空上一个GLSL版本

先上效果

Demo效果

代码实现

- (void)likeClick:(id)sender {
    CAEmitterLayer *likeEmitter = [CAEmitterLayer layer];
    likeEmitter.emitterPosition = self.likeBtn.center;
    likeEmitter.emitterSize = CGSizeZero;
    likeEmitter.emitterShape = kCAEmitterLayerCircle;
    likeEmitter.emitterMode = kCAEmitterLayerPoints;
    NSArray *imgs = @[@"fengmi_SVG",@"huandengpian_SVG",@"mianbao_SVG",@"shala_SVG",@"shengyu_SVG",@"shuiguo_SVG",@"tang_SVG"];
    NSMutableArray *cells = [NSMutableArray array];
    for (int i = 0; i < imgs.count; i++) {
        //发射单元
        CAEmitterCell *likeCell1 = [CAEmitterCell emitterCell];
        //每s多少个粒子
        likeCell1.birthRate = arc4random_uniform(3) + 8;
        //单个存活时间
        likeCell1.lifetime = (arc4random_uniform(10) +40) * 0.01;
        //单个粒子初始速度,
        likeCell1.velocity = 1000;
        //单个粒子初始速度变化范围
        likeCell1.velocityRange = 500;
        //y轴加速度,重力效果,可以看到抛物线效果
        likeCell1.yAcceleration = likeCell1.velocity * 2;
        //x轴加速度
        likeCell1.xAcceleration = -100;
        //发射角度,x与y轴夹脚
        likeCell1.emissionLongitude = -M_PI_4 * 1.5;
        //发射角度变化范围,以发射角度为中心,左右扩散角度之和
        likeCell1.emissionRange = M_PI_2;
        //发射角度,x与z轴夹脚
        likeCell1.emissionLatitude = 0;
        //alpha可变化范围
        likeCell1.alphaRange = 0.f;
        //生命周期内的alpha变化速度
        likeCell1.alphaSpeed = -1.f / likeCell1.lifetime;
        //cell内容
        likeCell1.contents = (__bridge id _Nullable)([UIImage imageNamed:imgs[i]].CGImage);
        [cells addObject:likeCell1];
    }
    likeEmitter.emitterCells = cells;
    [self.view.layer addSublayer:likeEmitter];
}

代码说明:

  • CAEmitterLayer是基于核心动画Core Animation的粒子发射系统,可以用来做很多模拟动画,如飘雪烟花重物下落等等
  • alphaRange是变化范围,假如说cell的alpha为0.5,发射出来的粒子的alpha的范围是[0.5-alphaRange,0.5+ alphaRange],redRangegreenRangeblueRange同理
  • alphaSpeed粒子在声明周期内的alpha变化速度,正直透明度增加,负值透明度降低
  • 如何合理的设置velocitylifetime,需要考虑到粒子可以发射到的范围,可以参考velocity *lifetimeScreenWidth的大小进行衡量
  • emissionLongitude是与y轴的夹角,emissionRange是以夹角方向为中心,向两边扩散的夹脚之和,如果不设置emissionRange,那么发射的粒子方向就集中在一起,同样还可以设置emissionLatitude来调整发射方向与z轴的夹角
  • emitterSize对points发射模式没有效果

Demo

相关文章

网友评论

      本文标题:CAEmitterLayer实现粒子效果(仿皮皮虾点赞效果)

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