iOS 動畫實戰之Lottie動畫

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

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

2.傳回與菜單之間的切換, 生動有趣!

3.還有各種形變動畫.

更棒的是, 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時一定要注意素材的名字不能一樣, 否則動畫就是錯亂的, 簡單講一講怎麼改.

幾點值得注意的是:

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之後一個很好的補充.

君凱商聯網-iOS-字唐名僧