iOS動畫實戰之Lottie動畫

介紹

若是你還不知道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~, 謝謝~