CoreAnimation核⼼动画初深

了解—CoreAnimation

CoreAnimation特殊图层

下面来一些案例：

点赞粒子效果案例

自定义一个继承于UIButton的CharlesFFLikeEffectBtn

    //1.粒子   
    CAEmitterCell *emitterCell = [CAEmitterCell emitterCell];
    emitterCell.name = @"explosionCell";
     //透明值变化度
    emitterCell.alphaSpeed = - 1.f;
    //透明度范围
    emitterCell.alphaRange = 0.10;

    //生命周期
    emitterCell.lifetime = 1;

    //生命周期range
    emitterCell.lifetimeRange = 0.1;

    //粒子速度
    emitterCell.velocity = 40.f;

    //粒子速度范围
    emitterCell.velocityRange = 10.f;

    //缩放比例
    emitterCell.scale = 0.08;

    //缩放比例range
    emitterCell.scaleRange = 0.02;
    //粒子图片
    emitterCell.contents = (id)[[UIImage imageNamed:@"spark_red"] CGImage];

    // 2.发射源
    CAEmitterLayer * explosionLayer = [CAEmitterLayer layer];
    [self.layer addSublayer:explosionLayer];

    self.explosionLayer = explosionLayer;
    //发射院尺寸大小
    self.explosionLayer.emitterSize = CGSizeMake(self.bounds.size.width + 40, self.bounds.size.height + 40);
    //emitterShape表示粒子从什么形状发射出来,圆形形状
    explosionLayer.emitterShape = kCAEmitterLayerCircle;
    //emitterMode发射模型,轮廓模式,从形状的边界上发射粒子
    explosionLayer.emitterMode = kCAEmitterLayerOutline;
    //renderMode:渲染模式
    explosionLayer.renderMode = kCAEmitterLayerOldestFirst;
    //粒子cell 数组
    explosionLayer.emitterCells = @[emitterCell];

}

• 设置发射位置

  • (void)layoutSubviews{ [super layoutSubviews]; //发射源位置 self.explosionLayer.position = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);

  }

• 选中状态 实现缩放

  • (void)setSelected:(BOOL)selected{ [super setSelected:selected];

    // 通过关键帧动画实现缩放 CAKeyframeAnimation * animation = [CAKeyframeAnimation animation]; // 设置动画路径 animation.keyPath = @"transform.scale";

    if (selected) { // 从没有点击到点击状态 会有爆炸的动画效果 animation.values = @[@1.5,@2.0, @0.8, @1.0]; animation.duration = 0.5; //计算关键帧方式: animation.calculationMode = kCAAnimationCubic; //为图层添加动画 [self.layer addAnimation:animation forKey:nil];

      // 让放大动画先执行完毕 再执行爆炸动画
      [self performSelector:@selector(startAnimation) withObject:nil afterDelay:0.25];
    

    }else{ // 从点击状态normal状态 无动画效果 如果点赞之后马上取消 那么也立马停止动画 [self stopAnimation]; } }

• 开始动画

  • (void)startAnimation{

    // 用KVC设置颗粒个数 [self.explosionLayer setValue:@1000 forKeyPath:@"emitterCells.explosionCell.birthRate"];

    // 开始动画 self.explosionLayer.beginTime = CACurrentMediaTime();

    // 延迟停止动画 [self performSelector:@selector(stopAnimation) withObject:nil afterDelay:0.15]; }

• 动画结束

  • (void)stopAnimation{ // 用KVC设置颗粒个数 [self.explosionLayer setValue:@0 forKeyPath:@"emitterCells.explosionCell.birthRate"]; //移除动画 [self.explosionLayer removeAllAnimations]; }

Demo地址

下雨效果案例

主要代码块

- (void)setupEmitter{
        // 1\. 设置CAEmitterLayer
    CAEmitterLayer * rainLayer = [CAEmitterLayer layer];

    // 2.在背景图上添加粒子图层
    [self.backGroundImgView.layer addSublayer:rainLayer];

    self.rainLayer = rainLayer;

    //3.发射形状--线性
    rainLayer.emitterShape = kCAEmitterLayerLine;

    //发射模式
    rainLayer.emitterMode = kCAEmitterLayerSurface;

    //发射源大小
    rainLayer.emitterSize = self.view.frame.size;

    //发射源位置 y最好不要设置为0 最好<0
    rainLayer.emitterPosition = CGPointMake(self.view.bounds.size.width * 0.5, -10);

    // 2\. 配置cell
    CAEmitterCell * snowCell = [CAEmitterCell emitterCell];

    //粒子内容
    snowCell.contents = (id)[[UIImage imageNamed:@"rain_white"] CGImage];

    //每秒产生的粒子数量的系数
    snowCell.birthRate = 25.f;

    //粒子的生命周期
    snowCell.lifetime = 20.f;

    //speed粒子速度.图层的速率。用于将父时间缩放为本地时间，例如，如果速率是2，则本地时间的进度是父时间的两倍。默认值为1。
    snowCell.speed = 10.f;

    //粒子速度系数, 默认1.0
    snowCell.velocity = 10.f;

    //每个发射物体的初始平均范围,默认等于0
    snowCell.velocityRange = 10.f;

    //粒子在y方向的加速的
    snowCell.yAcceleration = 1000.f;

    //粒子缩放比例: scale
    snowCell.scale = 0.1;

    //粒子缩放比例范围:scaleRange
    snowCell.scaleRange = 0.f;

    // 3.添加到图层上
    rainLayer.emitterCells = @[snowCell];
}

下雨效果Demo地址