亚洲av无码国产精品久久不卡,亚洲av不卡一区二区三区,太粗太长太硬真爽视频

亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國推薦設(shè)計師（詳情）

提交需求

賽事與廣告咨詢合作，請?zhí)顚懶枨蟊韱?，我們會在第一時間與您聯(lián)系！

0/20

0/200

設(shè)計大賽

設(shè)計大賽
發(fā)布廣告
發(fā)布招聘
其它需求

取消發(fā)送需求

提交完成
感謝您對UI中國的支持和信賴！

我知道了

編輯推薦

AE能做的動效，都能在App中實現(xiàn)了？

0.0°

2017-08-16 原創(chuàng)文章 經(jīng)驗/觀點 舉報 4671 73 32 3

點融設(shè)計中心DDC 關(guān)注

Image title

我們總是能在dribble等網(wǎng)站看到一大堆酷炫吊炸天的動效。而在現(xiàn)實的App中卻很難看到。除了它們都有些過度設(shè)計的傾向之外，最后沒有在App上出現(xiàn)的很大一個原因是因為做不出來。

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

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

Image title

圖片來自:HTTPS://DRIBBBLE.COM/SHOTS/3281246-AIRPLANE-ANIMATION

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

一年前，Airbnb著手準備解決這個動效做不出來的難題?，F(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.

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

Image title

動畫轉(zhuǎn)換原理

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

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

Image title

首先我在AE里面做了這樣一個動畫。

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

Image title

導出的JSON文件

我們的目標是讓動畫在原生的環(huán)境下播放，這個時候就該Lottie出場了。

————-以下內(nèi)容會出現(xiàn)少量代碼，會感到不適者可快速通過—————-

首先在你原有的iOS 項目里面加入Lottie，同時將你之前導出的JSON文件也加進去。

然后在自己的項目里import Lottie

接下來只需要創(chuàng)建一個LOTAnimationView就可行了，你可以簡單將它理解為是一個放圖片的容器，正常情況下我們使用的是一個imageView作為容器，并將設(shè)計師提供的切圖放在里面。而這個LOTAnimationView里面放的則是我之前導出的動畫。

let animationView = LOTAnimationView.animationNamed(“demo”)

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

animationView?.play

————-代碼部分結(jié)束，可以睜眼了—————-

Image title

IOS 下運行的效果

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

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

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

play/pause 暫停/播放。

resize 縮放。因為整個圖都是根據(jù)代碼生成的，所以不存在放大失真的問題，可以任意縮放。并支持aspectFit, aspectFill scaleFill縮放模式。

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

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

speed up/slowed down 加速/減速可以控制動畫的播放速度。

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

Image title

LOTTIE 主要功能

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

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

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

總結(jié)：

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

Image title