iOS動畫實戰之Lottie動畫

syik發表於2017-09-18
iOS動畫

介紹

如果你還不知道Lottie是什麼, 那你真的out了.

如果把iOS動畫分為兩類: 互動式動畫, 播放式動畫, 那麼其中的播放動畫完全可以使用Lottie來完成, 例如:

作為收藏按鈕, 是不是很活潑?

返回與選單之間的切換, 生動有趣!

還有各種形變動畫.

這裡先放上Lottie的地址: github.com/airbnb/lott…

更棒的是, Lottie有各種不同的版本, 安卓, iOS, 前端都可以使用, 理論上動畫做一套就可以共用, 大大的減少了工作量.

使用方法

  1. 整合環境: 移動端同學整合Lottie框架, UI/UE同學整合AE的bodymovin外掛
  2. 製作動畫, 匯出檔案, 拖進工程
  3. 建立LOTAnimationView, 並播放

非常簡單, 下面看兩個實際例子

實戰

先看第一個例子:

典型的形變動畫加上幾個普通動畫融合在一起, 如果由程式設計師來寫, 確實還要花一番心思, 使用Lottie就非常容易了.

viewDidLoad時載入動畫, 在檢視顯示出來時播放, 播放完了移除. 就是這麼簡單.

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];

    if (_launchMask && _launchAnimation) {
        WeakObj(self);
        [_launchAnimation playWithCompletion:^(BOOL animationFinished) {

            [UIView animateWithDuration:0.3 animations:^{
                selfWeak.launchMask.alpha = 0;
            } completion:^(BOOL finished) {
                [selfWeak.launchAnimation removeFromSuperview];
                selfWeak.launchAnimation = nil;
                [selfWeak.launchMask removeFromSuperview];
                selfWeak.launchMask = nil;
            }];
        }];
    }
}


- (void)setupLaunchMask{
    _launchMask = [[UIView alloc] initWithFrame:self.view.bounds];

    [JRKeyWindow addSubview:_launchMask];

    _launchAnimation = [LOTAnimationView animationNamed:@"data"];
    _launchAnimation.cacheEnable = NO;
    _launchAnimation.frame = self.view.bounds;
    _launchAnimation.contentMode = UIViewContentModeScaleToFill;
    _launchAnimation.animationSpeed = 1.2;

    [_launchMask addSubview:_launchAnimation];
}複製程式碼

甚至可以用在引導頁中, 程式碼都很簡單, 就不重複貼了. 值得注意的是, 像這樣多次使用到Lottie時一定要注意素材的名字不能一樣, 否則動畫就是錯亂的, 簡單講一講怎麼改.

這是一個動畫資源的檔案結構, 如果修改了img_0.png及其資料夾, 則需要在Json檔案中修改對應的內容

這就是Json檔案中的內容, 最上面一部分包含了素材路徑, 素材名稱, 注意修改好就ok.

第二個例子:

動畫有小魚的尾巴搖動, 眼睛眨, 魚鰭煽動, 背後的小泡泡時隱時現, 隨機運動, 這讓程式設計師來一個個寫, 效率必然很低. 使用Lottie則簡單很多, 我們公司的高階UI寫完這個簡直不要太輕鬆.

讓UI同學匯出動畫時將第一幀擷取出來作為啟動頁靜態圖, 在第一個檢視載入的地方設定動態動畫.

- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];

    if (_launchMask && _launchAnimation) {
        WeakObj(self);
        [_launchAnimation playWithCompletion:^(BOOL animationFinished) {

            [UIView animateWithDuration:0.3 animations:^{
                selfWeak.launchMask.alpha = 0;
            } completion:^(BOOL finished) {
                [selfWeak.launchAnimation removeFromSuperview];
                selfWeak.launchAnimation = nil;
                [selfWeak.launchMask removeFromSuperview];
                selfWeak.launchMask = nil;
            }];
        }];
    }
}


- (void)setupLaunchMask{
    _launchMask = [UIImageView imageViewWithFrame:self.view.bounds image:[UIImage imageNamed:@"launchAnimationBg"]];

    [self.view addSubview:_launchMask];

    _launchAnimation = [LOTAnimationView animationNamed:@"launchAnimation"];
    _launchAnimation.cacheEnable = NO;
    _launchAnimation.frame = self.view.bounds;
    _launchAnimation.contentMode = UIViewContentModeScaleToFill;
    _launchAnimation.animationSpeed = 1.2;

    [_launchMask addSubview:_launchAnimation];
}複製程式碼

幾點值得注意的是:

  1. 我這建立一個UIImageView作為背景, 是拆分了動畫, 將不動的部分作為背景, 避免記憶體中載入的圖片過多, 後面會細說這個問題.

  2. LOTAnimationView這個類就是動畫本身了, 也可以設定contentMode, 所以為了適配, 這個屬性應該與啟動頁圖片一致(建議啟動頁用Storyboard + UIImageView).

  3. 在檢視載入完成之後呼叫_launchAnimation的play方法, 完成之後漸變色隱藏並置空.

很容易的, 一個精美的啟動動畫就完成了.

總結

看完了本篇文章, 你會發現動畫竟然如此簡單, 那我們以後動畫全用Lottie來實現? 其實Lottie也有一定的限制

Lottie是基於CALayer的動畫, 所有的路徑預先在AE中計算好, 轉換為Json檔案, 然後自動轉換為Layer的動畫, 所以效能理論上是非常不錯的, 在實際使用中, 確實很不錯, 但是有幾點需要注意的:

  • 如果使用了素材, 那麼素材圖片的每個畫素都會直接載入進記憶體, 並且是不能釋放掉的(實測, 在框架中有個管理cache的類, 並沒有啟動到作用, 若大家找到方法請告訴我), 所以, 如果是一些小圖片, 載入進去也還好, 但是如果是整頁的啟動動畫, 如上面的啟動頁動畫, 不拆分一下素材, 可能一個啟動頁所需要的記憶體就是50MB以上. 如果不使用素材, 而是在AE中直接繪製則沒有這個問題.

  • 如果使用的PS中繪製的素材, 在AE中做動畫, 可能在動畫匯出的素材中出現黑邊, 我的解決辦法是將素材拖入PS去掉黑邊, 同名替換.

  • 拆分素材的辦法是將一個動畫中靜態的部分直接切出來載入, 動的部分單獨做動畫

  • 如果一個專案中使用了多個Lottie的動畫, 需要注意Json檔案中的路徑及素材名稱不能重複, 否則會錯亂

  • 不支援漸變色

  • 不支援AE中的mask屬性

  • Lottie先天就支援播放式動畫, 對於互動式動畫有個animationProgress的屬性(待核實)

基於以上的問題, 建議使用Lottie的場合為複雜的播放式形變動畫, 因為形變動畫由程式設計師一點點的寫路徑確實不直觀且效率低. 但即便如此, Lottie也是我們在CoreAnimation之後一個很好的補充.

以上健唄的Demo地址: github.com/syik/JR

直播伴侶地址: github.com/syik/Bullet…

這是一個已經上架的App, 大家可以直接在App Store中找到使用. 上一篇文章為此App中CoreAnimation與CoreGraphics可互動式圖表實戰.
若大家覺得寫得有用, 不吝嗇打賞一個Star~, 謝謝~

相關文章