我的博客地址：www.viggoz.com
這篇文章簡單總結(jié)了一下網(wǎng)頁和移動(dòng)App中動(dòng)畫的實(shí)現(xiàn)方法捞稿，bodymovin無疑是一個(gè)很好的解決方案累盗，也可以說是最好的解決方案亲族。
1. 關(guān)于
關(guān)于網(wǎng)頁端動(dòng)畫實(shí)現(xiàn)
web端做動(dòng)畫有多種形式国裳，可以用CSS的animation鬓照，也可以用Canvas，或者是用JS控制CSS的屬性形成動(dòng)畫秽之。我們經(jīng)常使用CSS做一些比較簡單的動(dòng)畫当娱，像過度、加載的動(dòng)畫考榨，對于一些比較復(fù)雜的跨细，可能會(huì)做成gif，或者是用Canvas河质，使用Canvas的控制粒度可以很細(xì)冀惭，同時(shí)工作量相對也比較大。做動(dòng)畫還有其它的方式掀鹅，那就是使用After Effect(AE)/Flash/Premiere(Pr)/會(huì)聲會(huì)影等視頻軟件散休，這種可視化的制作方式相對于直接寫代碼來說，會(huì)更容易簡單自然淫半。做動(dòng)畫本身應(yīng)該使用工具進(jìn)行制作溃槐，但是這種視頻軟件做出來的動(dòng)畫最后都是生成視頻文件，并且通常體積還很大科吭，沒有辦法直接移植到網(wǎng)頁上去昏滴。然而好消息是猴鲫，現(xiàn)在我們可以使用AE做動(dòng)畫，然后使用bodymovin插件導(dǎo)出成html文件進(jìn)行播放谣殊。
關(guān)于移動(dòng)應(yīng)用動(dòng)畫實(shí)現(xiàn)
使用 Gif拂共，這種方式當(dāng)然可行，但是使用 Gif 占用空間較大姻几，而且需要為各種屏幕尺寸宜狐、分辨率做適配，因?yàn)?Android 沒有提供原生 Gif 的 api 支持蛇捌，所以這種方案還會(huì)遇到兼容性問題抚恒；
使用幀動(dòng)畫内斯，這種方式還不如使用 Gif畅蹂，一般來說使用幀動(dòng)畫占用空間比 Gif 還要大的多，而且一樣要做多屏幕分辨率的適配悦荒，不過不會(huì)遇到兼容性問題春贸；
使用視頻混萝，這種方式當(dāng)然可以，但是一般來說宣傳片才用的上視頻萍恕，一般的動(dòng)畫遠(yuǎn)不需要用視頻才能實(shí)現(xiàn)的逸嘀，未免有些大材小用了，而且占用空間依然很大允粤。
Android 5.x 之后提供了對 SVG 的支持崭倘，通過 VectorDrawable、AnimatedVectorDrawable 的結(jié)合可以實(shí)現(xiàn)一些稍微復(fù)雜的動(dòng)畫维哈，兼容性是一個(gè)問題绳姨，不過整個(gè)實(shí)現(xiàn)流程非常麻煩，每次全新實(shí)現(xiàn)一個(gè)動(dòng)畫都得重頭來過阔挠，最最關(guān)鍵的是，如果一個(gè)公司下的 App脑蠕，iOS 也要實(shí)現(xiàn)一套一樣的動(dòng)畫购撼，資源的占用就顯得過大了。
Facebook 開源了一個(gè)類似的庫叫做 Keyframes谴仙，Keyframes是將AE動(dòng)畫轉(zhuǎn)換為允許在Android和iOS設(shè)備上呈現(xiàn)的數(shù)據(jù)格式的庫迂求。也是跨平臺的，但是本文介紹的 Littie 比 Keyframes 支持的特性更多晃跺。這里不做研究揩局。這個(gè)庫的開源地址在這里：https://facebookincubator.github.io/Keyframes/有興趣的同學(xué)可以去看下。
2. bodymovin
Bodymovin實(shí)現(xiàn)動(dòng)畫
用Adobe公司的after effect軟件做出來動(dòng)畫掀虎，用Bodymovin的AE插件可以將動(dòng)畫導(dǎo)出為json文件凌盯，bodymovin就是這個(gè)動(dòng)畫json文件的前端播放器付枫，支持渲染為svg\canvas\html三種格式。它不僅可以播放動(dòng)畫驰怎，可以完全控制動(dòng)畫的播放阐滩、暫停、速率县忌、播放對應(yīng)幀等等掂榔。更可以做到更改幀對象的位置。
如何使用Bodymovin
Lottie官方網(wǎng)址：http://airbnb.design/lottie/#get-started
Bodymovin AE Extension下載地址：https://github.com/airbnb/lottie-web/tree/master/build/extension
Android：https://github.com/airbnb/lottie-android
iOS：https://github.com/airbnb/lottie-ios
ReactNative：https://github.com/airbnb/lottie-react-native
栗子
這是我做的一個(gè)栗子症杏，Github地址： https://github.com/ViggoZ/notification_guide_motion/tree/gh-pages
網(wǎng)頁實(shí)現(xiàn)效果：http://viggoz.com/notification_guide_motion/
主要代碼：
<body>
<div id="bm"> </div>
<script src="scripts/bodymovin.js"></script>
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'
})
</script>
</body>
可以直接下載項(xiàng)目装获，自己用AE做好動(dòng)畫，生成data.json和image文件之后替換項(xiàng)目相應(yīng)位置即可運(yùn)行厉颤。
注意：這里有一點(diǎn)要說明一下穴豫，bodymovin的json文件在chrome中瀏覽是要有服務(wù)器環(huán)境才可以運(yùn)行的，不然會(huì)報(bào)錯(cuò)走芋，本地預(yù)覽使用safari沒問題绩郎，估計(jì)是瀏覽器協(xié)議的問題。
bodymovin官方下載：https://github.com/airbnb/lottie-web/blob/master/build/player/lottie.js
3. 總結(jié)
使用bodymovin實(shí)現(xiàn)動(dòng)畫是現(xiàn)在非常方便的一種方法翁逞，尤其是在做一些復(fù)雜動(dòng)畫的時(shí)候可以做到設(shè)計(jì)與實(shí)現(xiàn)完全分開肋杖。設(shè)計(jì)師專注動(dòng)畫制作，對于開發(fā)者而言只需要調(diào)用即可挖函。不過缺點(diǎn)也是有的状植，設(shè)計(jì)師需要先通過AI設(shè)計(jì)矢量動(dòng)畫素材，然后在AE中導(dǎo)入的ai圖層上右鍵 > 從矢量圖層創(chuàng)建形狀怨喘。但也是有很多種情況需要用AE去重新畫矢量圖形津畸，個(gè)人覺得AE畫圖實(shí)在是累（畢竟不是專業(yè)的畫圖軟件）所以我比較喜歡直接用sketch或者ps設(shè)計(jì)，然后直接輸出切圖再在AE中制作動(dòng)畫必怜。這個(gè)缺點(diǎn)也是明顯的肉拓，圖片素材太大。
還有就是我看過現(xiàn)在很多第三方制作動(dòng)畫的應(yīng)用可以直接生成代碼梳庆，而且可以和sketch無縫對接暖途，直接導(dǎo)入sketch設(shè)計(jì)文件，但是缺點(diǎn)也是很明顯的膏执，不適合多種平臺開發(fā)驻售，動(dòng)畫制作功能明顯沒有Adobe家的AE強(qiáng)大。但是用來做交互動(dòng)畫還是很好用的更米。比如principle??欺栗。
注：本文轉(zhuǎn)載請注明原文地址：http://viggoz.com/2017/08/09/2017-08-09-Bodymovin/
參考：
https://facebookincubator.github.io/Keyframes/
https://github.com/panacena/LottieTest/
https://juejin.im/post/58948f1b0ce4630056f3a629
http://www.mq2014.com/after-effect-zhuan-svg-dong-hua-shen-qi-de-bodymovin-cha-jian.html
http://www.renfed.com/2017/08/06/ae-bodymovin/
https://codepen.io/airnan/project/editor/ZeNONO/
