Lottie在手，動畫我有：ios/Android/Web三端複雜幀動畫解決方案

時間 2019-11-06

標籤 lottie 動畫 ios android web 複雜解決方案欄目 iOS 简体版

原文原文鏈接

本文編輯於OS X系統，以前出現過windows下看不到部分圖片的狀況，若有請你們告知

爲何須要Lottie

在相對複雜的移動端應用中，咱們可能會須要使用到複雜的幀動畫。例如：

剛進入APP時候可能會看到的入場小動畫，帶來愉悅的視覺享受
許多Icon的互動變化比較複雜多變的時候，研發復現成本高

總而言之，咱們的難題是：這些事情若是給咱們用CSS3（Web）或者Animated（RN）去實現是很是棘手的，並且由於研發人員和設計師之間自己沒法作到心靈相通，致使若是所有交給研發者完成效果，作出來的結果每每也不能讓設計師滿意。同時開發成本實在過高過高。

誒？那咱們想，能不能把全部的動畫交給設計師用設計工具（如AE）去作這些工做，而後直接導出一個文件給開發者去使用呢？若是這樣，設計師就能徹底獨立自主，而開發者只要像「引用一張圖片」那樣去用這個動畫就行了呀。

對，Lottie這個工具作的就是這件事。

Lottie動畫簡介

Lottie是一個用於Web和iOS（Android）的移動庫，用於解析使用Bodymovin導出爲json的Adobe After Effects動畫，並在移動設備上呈現它們。設計師第一次能夠建立和運送漂亮的動畫，而無需工程師手工從新建立。

引用原文

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

參考文獻

《Lottie官網》 http://airbnb.io/lottie/#/
《Lottie-Web開源GitHub》 https://github.com/airbnb/lottie-web/tree/master

Demo

除了Lottie外的其餘同類型的實現方案對比

1. gif：優勢：簡單。缺點：掉幀很是嚴重，體驗不流暢，嚴重影響用戶體驗，對於小Icon也許勉強能夠接受，但對於較大面積的動畫確定不行php

2. video: 優勢：兼容性好。缺點（web端）以下所示：html

自動播放問題:不少平臺，如微信，許多安卓瀏覽器，是禁止自動播放的，那麼這時，你的「動畫」就變成了一張「靜態圖」了
許多手機瀏覽器，如oppo和華爲，是有「播放置頂」功能的，影響用戶體驗
video控制條隱藏問題

3. APNG: APNG就是Animated PNG,它的做用和gif相似

優勢

支持 24 位真彩色圖片,(對比下gif色階過渡糟糕，圖片具備顆粒感)
支持 8 位 Alpha 透明通道(gif不支持 Alpha 透明通道，邊緣有雜邊)
向下兼容 PNG
同視覺質量的狀況下體積更小

缺點：兼容性問題嚴重

參考資料

《APNG 那些事》 https://aotu.io/notes/2016/11/07/apng/
《複雜幀動畫之移動端video採坑實現》http://www.javashuo.com/article/p-cmjgjezq-dp.html

Lottie的優缺點

（注：AE是設計師使用的一款動畫設計軟件）

優勢

跨平臺： IOS，Android，Web端均可以使用,橫跨三端
兼容性良好：IOS/Android兼容性很是好，web端的兼容性參考SVG/Canvas兼容性
動畫流暢細膩：由於直接使用了AE的參數構建，因此動畫很是流暢並且細膩
一個JSON文件，一個模塊API就足夠，研發能夠作到「開箱即用」，研發實現和維護成本很低
給設計師很是大的自由度，和CSS那種設計給UI而後研發二次實現不一樣，Lottie徹底由設計師實現，分工明確
接上面的第3點：維護成本低，由於所需文件資源能夠從網絡引入。
體積相對較小，性能成本能夠接受

缺點

並非全部的AE工具構建能力都能實現，支持手動K幀，但尚且不支持表達式，特效，mask蒙版等功能，須要和設計師溝通好
對於屬性動畫，大型動畫的渲染效果較差

總結：好用，夠用，兼容好，跨平臺。（只要和設計師提早商量好注意事項就不會有大問題） 更具體的你們能夠參考下面這篇研究文章參考資料

《生產環境中的動效落地之插件-lottie》https://www.jianshu.com/p/ad45c660fded

Lottie兼容性

這個分兩部分講

IOS/Android兼容性
Web端兼容性

IOS/Android兼容性

整體來看讓人比較滿意

具體的參數和數據，可閱覽：

《生產環境中的動效落地之插件-lottie》https://www.jianshu.com/p/ad45c660fded

Web端兼容性

由於Web端的Lottie-web工具是藉助Canvas，SVG去實現的，爲何這麼說呢？ API：bodymovin.loadAnimation（opt）裏面的opt.animType參數能夠指定三個值： html | canvas | SVG，因此Web端的兼容性也等價於SVG和Canvas的兼容性

1.SVG兼容性

2.Canvas兼容性

Lottie的使用過程

（注：下面的1，2，3在具體開發中讓設計師去作，設計師只要給你提供生成的JSON文件就能夠了）

1. 下載AE，這個能夠到官網下載，有7天試用期

2. 到 https://github.com/airbnb/lottie-web 下載包項目，而後進入/build/extension下面下，有個Bodymovin.zxp，這個是一個安裝包，點擊它，就會給AE安裝一個叫作Bodymovin的插件（Bodymovin是lottie-web技術棧下的一個工具）

3. 你的電腦可能不支持Bodymovin的zxp格式，不要緊，咱們下載一個解析器就能夠了，參考連接： https://zxpinstaller.com/

4. 設計一個動畫（不會不要緊，讓設計師作就行了），而且將動畫導出成json文件，可參考 https://www.jianshu.com/p/3c8e8025757d （注意，這個過程可能會很坑，等會有時間我總結一下）

5. 最後咱們不是已經有json文件了嘛，下面經過CDN腳本引用一下lottie的支持腳本，而後就可使用bodymovin的API了，示範例子以下

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
</head>

<body style="background-color:#ccc; margin: 0px;height: 100%;">
    <div style="width:100%;height:100%;" id="bodymovin"></div>
    <script>
        var animData = {
            wrapper: document.getElementById('bodymovin'),
            animType: 'html',
            loop: true,
            prerender: true,
            autoplay: true,
            path: './data.json'
        };
        var anim = bodymovin.loadAnimation(animData);
    </script>
</body>

6.最後，運行這段代碼，在瀏覽器中打開！就能夠啦（注意要跨域哦）

參考資料列表

《CDN託管系統》 https://cdnjs.com/libraries/bodymovin
《炫酷神器，AE插件Bodymovin.zxp的安裝與使用》 https://www.jianshu.com/p/9a1500571269

Lottie使用的坑點

就像我剛纔說的,Lottie只支持AE的基本功能，不支持表達式，特效，mask蒙版等功能，這些功能要是用了，要麼是你的JSON數據導出失敗，要麼你最後在Web端上顯示不出來，或者顯示和預期不同。因此不少功能要和設計師商量好
吐槽一下：Bodymovin這個插件的使用，真是讓人一言難盡。（最後導出的時候要點擊綠色的render按鈕才能導出，不要點那個player按鈕），若是能把render這個文案改爲export(導出)，語意上就更好理解一些了
lottie-web的使用須要手動處理跨域問題，不然會報錯誤。因此上面那段HTML代碼是不能用IDE插件經過文件方式直接打開的

本文完