CAEmitterLayer影片的開始和結束-有解無憂

有個需求，要求模仿微信做表情下雨的影片，一開始想用CAEmitterLayer,實作的代碼如下:

    //期望：顯示特效五秒后結束特效
    UIImage *image = [UIImage imageNamed:@"snow_white"];
    CGRect endRect = self.view.frame;
    UIView *layerView = [[UIView alloc]initWithFrame:endRect];
    //方便看到有view增加到里面
    layerView.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.1];
    layerView.userInteractionEnabled = NO;
    CAEmitterLayer * fireworksLayer = [CAEmitterLayer layer];
    [layerView.layer addSublayer:fireworksLayer];
    [self.view addSubview:layerView];
    [layerView.layer addSublayer:fireworksLayer];
    fireworksLayer.emitterPosition = CGPointMake(endRect.size.width * 0.5, -image.size.height / 2); // 這個position表示的是粒子產生的位置，注意是圖片中心位置的初始值，而不是(x,y)
    fireworksLayer.emitterSize = CGSizeMake(endRect.size.width - image.size.width / 2 * 2, 0.f);  // 粒子產生的隨機區域，如果要讓生成的粒子圖片不過左右螢屏邊緣，記住給左右兩邊留點空間
    fireworksLayer.emitterMode = kCAEmitterLayerOutline;
    fireworksLayer.emitterShape = kCAEmitterLayerLine;
    fireworksLayer.renderMode = kCAEmitterLayerAdditive;
    fireworksLayer.birthRate = 1;
    
    // 粒子
    CAEmitterCell * cell = [CAEmitterCell emitterCell];
    cell.birthRate = 1.f;//每一秒產生的粒子個數（實際數量和上面的birthRate相乘）
    cell.lifetime = 5.f;//粒子產生到消失為5秒
    cell.velocity = -(endRect.size.height + image.size.height / 2 * 2) / 5;
    cell.contents = (id)[image CGImage];
    
    fireworksLayer.emitterCells = @[cell];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, NSEC_PER_SEC * 5), dispatch_get_main_queue(), ^{

        //移除layer
        if (layerView.superview) {
            [layerView removeFromSuperview];
        }
    });

這時候我們能看到效果如此：

2022-03-03 11.06.07

這個時候其實我們做到了以下幾點

view顯示5秒并洗掉
雪花從上向下降落，而且速度是勻速的view高度/5秒
雪花每秒產生1顆
雪花在不超出左右邊緣之內隨機產生

但是這個效果最大的缺陷在于：雪花的產生和結束都十分的突兀，還需要實作的效果應該是：

效果開始時，雪花正好從頂部開始落下
view即將移除的時候，雪花不再生成
view移除的時候，最后一片雪花剛好落出螢屏

所以我們的優化也從三個方面進行，

影片起始時間點 beginTime

如果直接查看CAEmitterLayer.h檔案，并不能發現beginTime這個屬性，甚至其父類CALayer也找不到，直到找到協議CAMediaTiming才能找到，

// CALayer.h
@interface CALayer : NSObject <NSSecureCoding, CAMediaTiming>
...
@end

// CAMediaTiming.h
@protocol CAMediaTiming
...
/* The begin time of the object, in relation to its parent object, if
 * applicable. Defaults to 0. */

@property CFTimeInterval beginTime;
...
@end

所以我們設定beginTime就可以規定我們想讓layer開始影片的時間，但是不應該設定為0（本來就是默認為0），而是CACurrentMediaTime(),也就是現在，

CACurrentMediaTime,檔案里面告訴我們這是一個以秒為單位的當前的absolute time，屬性為CFTimeInterval(也是double), 在這里“絕對時間”不是某度百科里的提到的時空觀或者某個歷法，而是mach_absolute_time()——即基于系統啟動后的時鐘嘀嗒數轉換單位為秒的結果,與常見的時間戳[[NSDate date]timeIntervalSince1970]更是沒半毛錢沒有關系，
   NSLog(@"%lf %lf",[[NSDate date]timeIntervalSince1970], CACurrentMediaTime());
   //在某個時空輸出為：1646246718.232236 197452.774114

回到問題來，我們只要設定好beginTime，就可以讓影片從“現在”開始播放，而默認的0表示的是在“萬物之始”開始播放，也難怪我們剛才從螢屏上開始看到的影片不是從零開始的，

    fireworksLayer.beginTime = CACurrentMediaTime();

讓雪花停止生成

我們需要在粒子開始運動之后，讓粒子生成速度更改為0個/秒，首先明確的是，每秒生成粒子實際數量是fireworksLayer.birthRate * cell.birthRate，那么我們撓撓頭就可以添加這段代碼，

//細化需求為1s-3s是不斷生成粒子，3s生成最后一個粒子后不再生成粒子
    .....
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, NSEC_PER_SEC * 3), dispatch_get_main_queue(), ^{
        fireworksLayer.birthRate = 0;//影片在運動程序中要修改引數的話，可以修改layer的引數，試過在這個程序中只改cell引數不會成功
    });

調整速度，讓最后一顆粒子正好滾出螢屏時移除view

這里為了方便說明，所以本次只讓雪花在y軸上做勻速運動，在x軸上相對靜止（不左右移動），也是提醒各位，粒子產生的位置不是圖片初始的xy坐標值，而是中心點，這既是是我代碼中設定fireworksLayer.emitterPosition會附加圖片一半的高度（開始生成粒子時粒子下沿要在view上端）的原因，也是為什么計算速度所用到的總路程時，要加上圖片高度一半的兩倍（粒子上沿要到view下端才算結束）的原因，

    cell.velocity = -(endRect.size.height + image.size.height / 2 * 2) / 2; //正好最后一朵花開始的時候其圖片下沿在螢屏頂部，結束的時候其圖片上落到螢屏頂部

加上文章內提交優化后的代碼：

    //期望：顯示特效五秒后結束特效
    UIImage *image = [UIImage imageNamed:@"snow_white"];
    CGRect endRect = self.view.frame;
    UIView *layerView = [[UIView alloc]initWithFrame:endRect];
    //方便看到有view增加到里面
    layerView.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.1];
    layerView.userInteractionEnabled = NO;
    CAEmitterLayer * fireworksLayer = [CAEmitterLayer layer];
    [layerView.layer addSublayer:fireworksLayer];
    [self.view addSubview:layerView];
    [layerView.layer addSublayer:fireworksLayer];
    fireworksLayer.emitterPosition = CGPointMake(endRect.size.width * 0.5, -image.size.height / 2); // 這個position表示的是粒子產生的位置，注意是圖片中心位置的初始值，而不是(x,y)
    fireworksLayer.emitterSize = CGSizeMake(endRect.size.width - image.size.width / 2 * 2, 0.f);  // 粒子產生的隨機區域，如果要讓生成的粒子圖片不過左右螢屏邊緣，記住給左右兩邊留點空間
    fireworksLayer.emitterMode = kCAEmitterLayerOutline;
    fireworksLayer.emitterShape = kCAEmitterLayerLine;
    fireworksLayer.renderMode = kCAEmitterLayerAdditive;
    fireworksLayer.birthRate = 1;
    fireworksLayer.beginTime = CACurrentMediaTime();
    
    // 粒子
    CAEmitterCell * cell = [CAEmitterCell emitterCell];
    cell.birthRate = 1.f;//每一秒產生的粒子個數（實際數量和上面的birthRate相乘）
    cell.lifetime = 5.f;//粒子產生到消失為5秒
    cell.velocity = -(endRect.size.height + image.size.height / 2 * 2) / 2; //正好最后一朵花開始的時候其圖片下沿在螢屏頂部，結束的時候其圖片上落到螢屏頂部
    cell.contents = (id)[image CGImage];
    
    fireworksLayer.emitterCells = @[cell];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, NSEC_PER_SEC * 3), dispatch_get_main_queue(), ^{
        fireworksLayer.birthRate = 0;//影片在運動程序中要修改引數的話，可以修改layer的引數，試過在這個程序中只改cell引數不會成功
    });
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, NSEC_PER_SEC * 5), dispatch_get_main_queue(), ^{

        //移除layer
        if (layerView.superview) {
            [layerView removeFromSuperview];
        }
    });

效果圖：

2022-03-03 10.56.06

本文來自博客園，作者：MrYu4，轉載請注明原文鏈接：https://www.cnblogs.com/MrYU4/p/caemitterlayer-dong-hua-de-kai-shi-he-jie-shu.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/436998.html

標籤：iOS

上一篇：從菜鳥到高手, HMS Core影像分割服務教你如何在復雜背景里精細摳圖

下一篇：Android APP升級時決議程式包時出現問題