我們總是能在Dribbble等網(wǎng)站看到一大堆酷炫吊炸天的動(dòng)效。而在現(xiàn)實(shí)的App中卻很難看到。除了它們都有些過度設(shè)計(jì)的傾向之外，很大一個(gè)原因是因?yàn)樽霾怀鰜怼?/p>

現(xiàn)在很多小公司的實(shí)際情況是，你能想出100種動(dòng)效方案，工程師就能給你說出101種做不出來的原因。

至于這101種做不出來的原因里，一大部分原因是動(dòng)效真的很難寫。為了寫個(gè)動(dòng)效，用上幾百行代碼也是常有的事。如果你還不說清楚動(dòng)效的具體原理，直接扔個(gè)視頻給工程師，讓他看著辦。那么就是寫出來了，十有八九也不是你想要的效果。弄到最后只能用GIF，而GIF對(duì)使用的場(chǎng)景又有著極大的限制。

如上面的飛機(jī)尾焰，是整個(gè)設(shè)計(jì)的最大亮點(diǎn)。如果你是用了AE里內(nèi)置的一些特效做出來的，也就是說你也不能很清楚的描述飛機(jī)尾焰產(chǎn)生的具體原理，那你在和工程師溝通時(shí)會(huì)顯得特別困難，畢竟你總不能讓工程師在開發(fā)的時(shí)候調(diào)用AE里面的功能吧。

一年前，Airbnb著手準(zhǔn)備解決這個(gè)動(dòng)效做不出來的難題。現(xiàn)在他們給出的解決方案是Lottie，并已將它開源。

Airbnb是這么介紹Lottie的：

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

大概意思就是說它是一個(gè)第三方library，可以實(shí)時(shí)渲染After Effect里做出來的動(dòng)畫，用起來就像調(diào)用切圖一樣方便。這里可能會(huì)有一個(gè)誤區(qū)，它并不是直接將AE里的動(dòng)畫轉(zhuǎn)換成iOS或者Android的代碼，然后工程師直接復(fù)制進(jìn)去就可以了。

△ ?動(dòng)畫轉(zhuǎn)換原理

以iOS 為例，首先你需要通過第三方AE插件Bodymovin將你的動(dòng)畫導(dǎo)出成JSON格式的數(shù)據(jù)，然后再在iOS 開發(fā)的時(shí)候使用Lottiet將JSON格式的數(shù)據(jù)轉(zhuǎn)換成原生動(dòng)畫。

下面就舉一個(gè)具體的列子來說明下如何使用Lottie。

首先我在AE里面做了這樣一個(gè)動(dòng)畫。

第一步使用Bodymovin，將動(dòng)畫轉(zhuǎn)換成JSON格式的。這個(gè)AE插件其實(shí)是為了將動(dòng)畫轉(zhuǎn)成Web格式的，轉(zhuǎn)好以后其實(shí)已經(jīng)可以放到Web上去了。

△ ?導(dǎo)出的JSON文件

我們的目標(biāo)是讓動(dòng)畫在原生的環(huán)境下播放，這個(gè)時(shí)候就該Lottie出場(chǎng)了。

首先在你原有的iOS 項(xiàng)目里面加入Lottie，同時(shí)將你之前導(dǎo)出的JSON文件也加進(jìn)去。

然后在自己的項(xiàng)目里import Lottie，接下來只需要?jiǎng)?chuàng)建一個(gè)LOTAnimationView就可行了，你可以簡(jiǎn)單將它理解為是一個(gè)放圖片的容器，正常情況下我們使用的是一個(gè)imageView作為容器，并將設(shè)計(jì)師提供的切圖放在里面。而這個(gè)LOTAnimationView里面放的則是我之前導(dǎo)出的動(dòng)畫。

let animationView = LOTAnimationView.animationNamed(“demo”)

上面的”demo”就是AE里導(dǎo)出的JSON文件的名字，接下來只需調(diào)用一下播放就能開始播放動(dòng)畫了。

animationView?.play

△ ?iOS 下運(yùn)行的效果

可以看到這個(gè)動(dòng)畫和AE里的有些區(qū)別，最后炸開的效果沒有了。炸開的效果我是用Repeater做的，實(shí)際上只是做了一個(gè)，其它的都是重復(fù)這一個(gè)的效果。顯然Lottie并不支持Repeater。Airbnb說他們會(huì)盡量讓Lottie支持更多AE里面的功能（想了解支持的AE里的功能可以看這里：https://github.com/airbnb/lottie-ios）。雖然現(xiàn)在并不能做到只要你能在AE里做出來的，就能轉(zhuǎn)成原生動(dòng)畫，不過個(gè)人認(rèn)為，現(xiàn)在支持的功能也夠用了。

既然最后炸開的效果不能用Repeater做了，那就老老實(shí)實(shí)自己一個(gè)個(gè)復(fù)制出來后再調(diào)整。調(diào)整好后重新導(dǎo)出JSON文件，放到iOS項(xiàng)目里，這次就可以正常播放了。

那么Lottie到底支持對(duì)動(dòng)畫進(jìn)行哪些操作呢。我暫時(shí)還沒有在官網(wǎng)找到詳細(xì)的API說明，根據(jù)我實(shí)際的試用和一些介紹，大致找到了這些主要功能：

play/pause 暫停/播放。

resize 縮放。因?yàn)檎麄€(gè)圖都是根據(jù)代碼生成的，所以不存在放大失真的問題，可以任意縮放。并支持aspectFit, aspectFill scaleFill縮放模式。

loop 循環(huán)，可以讓動(dòng)畫循環(huán)播放。

Duration 動(dòng)畫時(shí)長，對(duì)的，即使AE里導(dǎo)出的文件已經(jīng)包含時(shí)長了，但是你還是可以通過代碼重新調(diào)整時(shí)長。

speed up/slowed down 加速/減速 可以控制動(dòng)畫的播放速度。

Progress 動(dòng)畫進(jìn)度，數(shù)值為0-1，這個(gè)相當(dāng)于是動(dòng)畫的進(jìn)度條，你可以通過手勢(shì)等一系列方式來控制動(dòng)畫的進(jìn)度。

△ ?LOTTIE 主要功能

通過試用，大概可以把Lottie理解為一個(gè)動(dòng)畫播放器。和我們常用播放器一樣，你可以播放，快進(jìn)，拖動(dòng)進(jìn)度條等。而從AE里面導(dǎo)出來的JSON 文件就是播放的內(nèi)容。

了解了上面這些東西，就可以分析一下Lottie的使用場(chǎng)景了。

盡管Lottie提供了很多種控制方式，但是卻不能改變播放的內(nèi)容。回到文章開頭的飛行動(dòng)效，能否使用Lottie來實(shí)現(xiàn)呢？答案似乎是否決的，即使可實(shí)現(xiàn)Calgary到Moscow這條飛行路線，一旦換一下地點(diǎn)，Lottie就無能為力了，畢竟動(dòng)畫的內(nèi)容里只有這一條路線。

總結(jié)：Lottie能讓AE里的動(dòng)畫在原生環(huán)境下播放，同時(shí)還支持對(duì)動(dòng)畫的一些交互，大大地節(jié)省了開發(fā)的時(shí)間。即使它并不支持AE里所有的功能，但是對(duì)于App的動(dòng)效來說也是足夠用了。Lottie并不支持修改動(dòng)畫里面的內(nèi)容，對(duì)于內(nèi)容會(huì)變化的動(dòng)效，Lottie并不適用。Lottie最合適的使用場(chǎng)景是做動(dòng)態(tài)圖標(biāo)，引導(dǎo)頁面等內(nèi)容相對(duì)獨(dú)立的動(dòng)效。

歡迎關(guān)注點(diǎn)融設(shè)計(jì)中心DDC微信公眾號(hào)：「ID：DR_DDC」

「動(dòng)效設(shè)計(jì)全攻略」

1. 《80%是沒必要的！動(dòng)效該潛移默化OR引人注目？》
2. 《漲姿勢(shì)！動(dòng)效設(shè)計(jì)如何從四個(gè)維度吸引你的注意力？》
3. 《引導(dǎo)有門道！YEP!教你用動(dòng)效闡釋APP運(yùn)作機(jī)制》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com