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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

let animationView = LOTAnimationView.animationNamed(“demo”)

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

animationView?.play

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

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

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

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

play/pause 暫停/播放。

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

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

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

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

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

△ ?LOTTIE 主要功能

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

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

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

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

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

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

1. 《80%是沒(méi)必要的！動(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ì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

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