iOS CoreAnimation(三) - CAEmitter

作者: 顶级蜗牛 | 来源:发表于2024-04-01 16:35 被阅读0次

CoreAnimation的简单总结
CALayer的使用和animation属性(一)
iOS篇-UI篇-CoreAnimation(核心动画)
iOS 动画之CoreAnimation(CALayer)
iOS 动画之CoreAnimation(CALayer)
21- 《A GUIDE TO IOS ANIMATION 2
CALayer的分析
iOS - 核心动画
ios 相关知识复习
CoreAnimation解析及中高级动画实现

本文主要内容：
1.了解CAEmitterLayer 类常⽤属性与⽅法
2.了解CAEmitterCell 类常⽤属性与⽅法
3.案例：实现发射粒子效果
4.案例：实现下雨场景
5.案例：实现QQ点赞效果

一、CAEmitterLayer常用属性与方法

CAEmitterLayer的实现⾼性能的粒⼦引擎,被⽤来创建实现粒⼦动画,⽐如烟雾,⽕,⾬等效果。

API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0))
@interface CAEmitterLayer : CALayer
// emitterCells 存放粒子类型
// 一个发射器可以存放多种的粒子类型，圆形/方形/星形...只需要告诉发射器即可
@property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;

// 产生粒子速率（默认1.0）
@property float birthRate;

// 粒子的生命周期（默认1.0）
@property float lifetime;

// 粒子发射源的位置，默认(x:0, y:0, z:0)
@property CGPoint emitterPosition;
@property CGFloat emitterZPosition;

//发射源尺寸CAEmitterLayer实例的size/depth, 默认(width:0, height:0, depth:0)
@property CGSize emitterSize;
@property CGFloat emitterDepth;

// 发射源的形状：
/** 值：点形`point' (the default), 
       线形`line', 矩形`rectangle',
       圆形`circle', 
      3D立体矩形`cuboid'，
      3D立体圆形`sphere'.
*/
@property(copy) CAEmitterLayerEmitterShape emitterShape;

// 发射源模式:
/** 值：`points'点模式, 
       `outline'轮廓模式(发射点边界发射出来), 
       `surface'表面模式
       `volume' 3D发射模式(the default).
*/
@property(copy) CAEmitterLayerEmitterMode emitterMode;

// 发射源渲染模式：
// 值：`unordered' (the default), `oldestFirst', `oldestLast', `backToFront' (i.e. sorted into Z order) and `additive'.
@property(copy) CAEmitterLayerRenderMode renderMode;

// 当为true时，粒子被渲染成好像它们直接居住在层的超层的三维坐标空间，而不是首先被平展到层的平面（默认为NO）。
// 如果为true，则“filters”、“backgroundFilters”和阴影相关属性的效果是未定义的。
@property BOOL preservesDepth;

// 乘以粒子定义的粒子速度(默认为1.0)。
@property float velocity;

// 乘以粒子定义的粒子缩放(默认为1.0)。
@property float scale;

// 乘以粒子定义的粒子自旋(默认为1.0)。
@property float spin;

// 用于初始化随机数生成器的种子(默认为0)。
// 每一层都有自己的RNG状态。对于均值为M，范围为R的性质，性质的随机值均匀分布在区间[M - R/2, M + R/2]内。
@property unsigned int seed;
@end

二、CAEmitterCell常⽤属性与⽅法

CAEmitterCell定义的粒子样式。

API_AVAILABLE(macos(10.6), ios(5.0), watchos(2.0), tvos(9.0))
@interface CAEmitterCell : NSObject <NSSecureCoding, CAMediaTiming>
{
@private
  void *_attr[2];
  void *_state;
  uint32_t _flags;
}

// 创建实例
+ (instancetype)emitterCell;

// 粒子实现与CALayer定义的相同的属性模型。
+ (nullable id)defaultValueForKey:(NSString *)key;
- (BOOL)shouldArchiveValueForKey:(NSString *)key;

// 粒子名称，默认为nil。可以构造多种粒子样式，通过name去区分。
@property(nullable, copy) NSString *name;

// 是否可用，控制是否呈现此发射器中的粒子。
@property(getter=isEnabled) BOOL enabled;

// 每秒创建的发射的粒子数量。默认值0.0
// 产生率
@property float birthRate;

// 每个发射的粒子生命周期(以秒为单位)，指定为平均值和平均值的范围。这两个值默认0.0
@property float lifetime; // 生命周期
@property float lifetimeRange; // 生命周期的范围 

// 发射粒子的纬度(弧度为单位)，X轴与Z轴之间的夹角，默认0.0
@property CGFloat emissionLatitude;
// 发射粒子的经度(弧度为单位)，X轴与Y轴之间的夹角，默认0.0
@property CGFloat emissionLongitude;

// 发射角度(弧度为单位)，默认0.0。发射的物体均匀地分布在这个锥体上。
@property CGFloat emissionRange;

// 每个发射粒子平均速度，默认为0.0
@property CGFloat velocity;
// 每个发射粒子速度范围，默认为0.0
@property CGFloat velocityRange;

// 应用于发射粒子在对应轴上的加速度矢量。默认(0, 0, 0)
@property CGFloat xAcceleration;
@property CGFloat yAcceleration;
@property CGFloat zAcceleration;

/* The scale factor applied to each emitted object, defined as mean and
 * range about the mean. Scale defaults to one, range to zero.
 * Animatable. */
// 初始缩放比例，默认1.0，比如一开始就放大2倍就写2
@property CGFloat scale;
// 缩放范围，默认0.0
@property CGFloat scaleRange;
// 缩放速度
@property CGFloat scaleSpeed;

// 应用于每个粒子的旋转速度，定义为平均值和平均值的范围。默认为0。
@property CGFloat spin;
@property CGFloat spinRange;

/* The mean color of each emitted object, and the range from that mean
 * color. `color' defaults to opaque white, `colorRange' to (0, 0, 0,
 * 0). Animatable. */
// 粒子的颜色，默认白色
@property(nullable) CGColorRef color;
// 以及粒子的颜色变化范围，colorRange为(r:0, g:0, b:0, a:0)。
@property float redRange;
@property float greenRange;
@property float blueRange;
@property float alphaRange;
// 颜色变化速度，默认 (0, 0, 0, 0)
@property float redSpeed;
@property float greenSpeed;
@property float blueSpeed;
@property float alphaSpeed;

// 粒子内容，默认nil。通常是CGImageRef。
@property(nullable, strong) id contents;
// contents的大小，默认为[0 0 1 1]
@property CGRect contentsRect;
// contents的缩放系数
@property CGFloat contentsScale;

// 渲染“contents”图像时使用的过滤器参数。
@property(copy) NSString *minificationFilter;
@property(copy) NSString *magnificationFilter;
@property float minificationFilterBias;

// 粒子里面再套粒子，类似于tableViewCell里也能有tableView的Cell
@property(nullable, copy) NSArray<CAEmitterCell *> *emitterCells;

// 继承属性类似于layers。
@property(nullable, copy) NSDictionary *style;

@end

三、案例：实现发射粒子效果

#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) CAEmitterLayer * colorBallLayer;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
    [self setupEmitter];
    
}

- (void)setupEmitter {
    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, self.view.bounds.size.width, 50)];
    [self.view addSubview:label];
    label.textColor = [UIColor whiteColor];
    label.text = @"轻点或拖动来改变发射源位置";
    label.textAlignment = NSTextAlignmentCenter;
    
    //1.创建发射源，类似于UITableView
    CAEmitterLayer *colorBallLayer = [CAEmitterLayer layer];
    [self.view.layer addSublayer:colorBallLayer];
    self.colorBallLayer = colorBallLayer;
    
    //发射源尺寸colorBallLayer的frame
    colorBallLayer.emitterSize = self.view.frame.size;
    //发射源形状
    colorBallLayer.emitterShape = kCAEmitterLayerPoint;
    //发射模式
    colorBallLayer.emitterMode = kCAEmitterLayerPoints;
    //粒子发射的中心点.
    colorBallLayer.emitterPosition = CGPointMake(self.view.layer.bounds.size.width, 0);
    
    //2.设置Cell(粒子的样式)，类似于UITableViewCell
    CAEmitterCell *colorBallCell = [CAEmitterCell emitterCell];
    //粒子名称
    colorBallCell.name = @"ccCell";
    //粒子的产生速率
    colorBallCell.birthRate = 20.0f;
    //粒子的生命周期
    colorBallCell.lifetime = 10.0f;
    //粒子速度
    colorBallCell.velocity = 40.0f;
    colorBallCell.velocityRange = 100.0;
    colorBallCell.yAcceleration = 15.0f; // 粒子在Y轴上的加速矢量
    
    // 发射粒子的纬度(弧度为单位)，X轴与Z轴之间的夹角，默认0.0
    colorBallCell.emissionLatitude = M_PI;
    // 发射角度(弧度为单位)，默认0.0。发射的物体均匀地分布在这个锥体上。
    colorBallCell.emissionRange = M_PI_4;
    
    colorBallCell.scale = 0.2;
    colorBallCell.scaleRange = 0.1;
    colorBallCell.scaleSpeed = 0.02;
    
    //粒子的内容
    colorBallCell.contents = (id)[[UIImage imageNamed:@"circle_white"] CGImage]; // 一张图片
    
    //颜色变化
    colorBallCell.color = [UIColor colorWithRed:0.5 green:0.0 blue:0.5 alpha:1.0].CGColor;
    //粒子颜色改变范围
    colorBallCell.alphaRange = 0.8f;
    colorBallCell.redRange = 1.0f;
    colorBallCell.greenRange = 1.0f;
    
    //粒子变化的速度
    colorBallCell.blueSpeed = 1.0f;
    colorBallCell.alphaSpeed = -0.1;
    
    // 一个发射器可以存放多种的粒子类型，圆形/方形/星形...只需要告诉发射器即可
    colorBallLayer.emitterCells = @[colorBallCell];
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    CGPoint point = [self locationFromTouchEvent:event];
    [self setBallInPsition:point];
}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    CGPoint point = [self locationFromTouchEvent:event];
    [self setBallInPsition:point];
}

/**
 * 获取手指所在点
 */
- (CGPoint)locationFromTouchEvent:(UIEvent *)event{
    UITouch * touch = [[event allTouches] anyObject];
    return [touch locationInView:self.view];
}

/**
 * 移动发射源到某个点上
 */
- (void)setBallInPsition:(CGPoint)position{
    //创建基础动画(粒子放大过程)
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"emitterCells.colorBallCell.scale"];
    // 改变粒子的缩放 0.2->0.5
    anim.fromValue = @0.2;
    anim.toValue = @0.5f;
    anim.duration = 1.0;
    //变化模式: 线性变化,动画是匀速发生
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    
    //移动粒子的发射位置runloop
    //事务性动画,用来包装隐式动画
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    [self.colorBallLayer addAnimation:anim forKey:nil];
    [self.colorBallLayer setValue:[NSValue valueWithCGPoint:position] forKey:@"emitterPosition"];
    [CATransaction commit];
}
@end

四、案例：实现下雨场景

#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) CAEmitterLayer * rainLayer;
@property (nonatomic, weak) UIImageView * imageView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setupUI];
    [self setupEmitter];
}

- (void)setupUI {
    // 背景图片
    UIImageView * imageView = [[UIImageView alloc]initWithFrame:self.view.frame];
    [self.view addSubview:imageView];
    self.imageView = imageView;
    imageView.image = [UIImage imageNamed:@"rain"];
    
    // 下雨按钮
    UIButton * startBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.view addSubview:startBtn];
    startBtn.frame = CGRectMake(20, self.view.bounds.size.height - 60, 80, 40);
    startBtn.backgroundColor = [UIColor whiteColor];
    [startBtn setTitle:@"雨停了" forState:UIControlStateNormal];
    [startBtn setTitle:@"下雨" forState:UIControlStateSelected];
    [startBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    [startBtn setTitleColor:[UIColor redColor] forState:UIControlStateSelected];
    [startBtn addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
    
    // 雨量按钮
    UIButton * rainBIgBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.view addSubview:rainBIgBtn];
    rainBIgBtn.tag = 100;
    rainBIgBtn.frame = CGRectMake(140, self.view.bounds.size.height - 60, 80, 40);
    rainBIgBtn.backgroundColor = [UIColor whiteColor];
    [rainBIgBtn setTitle:@"下大点" forState:UIControlStateNormal];
    [rainBIgBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    [rainBIgBtn addTarget:self action:@selector(rainButtonClick:) forControlEvents:UIControlEventTouchUpInside];
    
    UIButton * rainSmallBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.view addSubview:rainSmallBtn];
    rainSmallBtn.tag = 200;
    rainSmallBtn.frame = CGRectMake(240, self.view.bounds.size.height - 60, 80, 40);
    rainSmallBtn.backgroundColor = [UIColor whiteColor];
    [rainSmallBtn setTitle:@"太大了" forState:UIControlStateNormal];
    [rainSmallBtn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    [rainSmallBtn addTarget:self action:@selector(rainButtonClick:) forControlEvents:UIControlEventTouchUpInside];
}

- (void)buttonClick:(UIButton *)sender {
    if (!sender.selected) {
        sender.selected = !sender.selected;
        NSLog(@"雨停了");
        // 停止下雨
        [self.rainLayer setValue:@0.f forKeyPath:@"birthRate"];
        
    }else{
        sender.selected = !sender.selected;
        NSLog(@"开始下雨了");
        // 开始下雨
        [self.rainLayer setValue:@1.f forKeyPath:@"birthRate"];
    }
}

- (void)rainButtonClick:(UIButton *)sender {
    NSInteger rate = 1;
    CGFloat scale = 0.05;
    if (sender.tag == 100) {
        NSLog(@"下大了");
        if (self.rainLayer.birthRate < 30) {
            [self.rainLayer setValue:@(self.rainLayer.birthRate + rate) forKeyPath:@"birthRate"];
            [self.rainLayer setValue:@(self.rainLayer.scale + scale) forKeyPath:@"scale"];
        }
        
    }else if (sender.tag == 200) {
        NSLog(@"变小了");
        if (self.rainLayer.birthRate > 1) {
            [self.rainLayer setValue:@(self.rainLayer.birthRate - rate) forKeyPath:@"birthRate"];
            [self.rainLayer setValue:@(self.rainLayer.scale - scale) forKeyPath:@"scale"];
        }
    }
}

- (void)setupEmitter {
    // 1. 设置CAEmitterLayer
    CAEmitterLayer * rainLayer = [CAEmitterLayer layer];
    // 2.在背景图上添加粒子图层
    [self.imageView.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];
}
@end

五、案例：实现QQ点赞效果

点赞按钮放大->缩小：CAKeyFrameAnimation
放大之后，释放一个圈的粒子效果：CAEmitterLayer

需要：1.自定义按钮、2.重写按钮选中状态、3.配置动画

#import "ViewController.h"
#import "CCLikeButton.h"
@interface ViewController ()
@end

@implementation ViewController
- (void)viewDidLoad {
    
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    //添加点赞按钮
    CCLikeButton * btn = [CCLikeButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(200, 150, 30, 130);
    [self.view addSubview:btn];
    [btn setImage:[UIImage imageNamed:@"dislike"] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"like_orange"] forState:UIControlStateSelected];
    [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
}

- (void)btnClick:(UIButton *)button {
    if (!button.selected) { // 点赞
        button.selected = !button.selected;
        NSLog(@"点赞");
    }else{ // 取消点赞
        button.selected = !button.selected;
        NSLog(@"取消赞");
    }
}
@end

#import "CCLikeButton.h"
@interface CCLikeButton()
@property(nonatomic,strong)CAEmitterLayer *explosionLayer;
@end

@implementation CCLikeButton
- (void)awakeFromNib{
    [super awakeFromNib];
    //设置粒子效果
    [self setupExplosion];
}

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self setupExplosion];
    }
    return self;
}

//设置粒子
- (void)setupExplosion {
    // 1. 粒子
    CAEmitterCell * explosionCell = [CAEmitterCell emitterCell];
    explosionCell.name = @"explosionCell";
    //透明值变化速度
    explosionCell.alphaSpeed = -1.f;
    //alphaRange透明值范围
    explosionCell.alphaRange = 0.10;
    //生命周期
    explosionCell.lifetime = 1;
    //生命周期range
    explosionCell.lifetimeRange = 0.1;
    //粒子速度
    explosionCell.velocity = 40.f;
    //粒子速度范围
    explosionCell.velocityRange = 10.f;
    //缩放比例
    explosionCell.scale = 0.08;
    //缩放比例range
    explosionCell.scaleRange = 0.02;
    //粒子图片
    explosionCell.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 = @[explosionCell];
}


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

/**
 * 选中状态 实现缩放
 */
- (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)setHighlighted:(BOOL)highlighted{
    [super setHighlighted:highlighted];
}

/**
 * 开始动画
 */
- (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];
}

- (void)drawRect:(CGRect)rect {
    
}
@end

CoreAnimation的简单总结
CoreAnimation: iOS动画主要是指CoreAnimation框架。 iOS动画的调用方式有三种：第...
CALayer的使用和animation属性(一)
iOS CALayer与iOS动画讲解及使用 1.关于CoreAnimation CoreAnimation是苹...
iOS篇-UI篇-CoreAnimation(核心动画)
iOS篇-UI篇-CoreAnimation(核心动画) iOS篇-UI篇-CoreAnimation(核心动画)
iOS 动画之CoreAnimation(CALayer)
CoreAnimation基本介绍 CoreAnimation动画位于iOS框架的Media层 CoreAnima...
iOS 动画之CoreAnimation(CALayer)
CoreAnimation基本介绍 CoreAnimation动画位于iOS框架的Media层 CoreAnima...
21- 《A GUIDE TO IOS ANIMATION 2
21- 《A GUIDE TO IOS ANIMATION 2.0》(杨骑滔)三章.CoreAnimation-学...
CALayer的分析
iOS开发CoreAnimation解读之三——几种常用Layer的使用解析一、CAEmitterLayer C...
iOS - 核心动画
一、基本概念 CoreAnimation 可用在 Mac OS X和iOS平台 CoreAnimation 的动画...
ios 相关知识复习
1.CoreAnimation iOS动画篇_CoreAnimation(超详细解析核心动画) 扩展1彻底理解po...
CoreAnimation解析及中高级动画实现
一.CoreAnimation介绍 CoreAnimation是一套图像渲染和动画基础框架，其在iOS和OSX平台...