Lottie框架
個人操作簡述步驟:
1.下載Creative Cloud,這個是adobe公司專用的下載器,若之前有下載adobe公司其它產(chǎn)品的話,先去搜CleanerTool清除一切adobe的文件和注冊表,然后重啟,下載這個creative cloud;
2.下載 ae cc 2017,在creative cloud上面下載,選擇最新版本,試用就行了;
3.下載ZXP INSTALLER 地址為:http://aescripts.com/learn/zxp-installer/ ,網(wǎng)絡(luò)不通暢時候會很慢;
4.下載bodymovin文件,上github搜這個插件,直接下載,解壓后在build/extension后有個.zxp的文件;
5.打開zxp installer軟件,選中open再選擇這個.zxp文件,然后根據(jù)彈出的框選擇 for me,然后就安裝成功,
6.打開AE CC 2017可以看到在"窗口-擴展程序"里有個bodymovin,直接點擊就開啟使用,
7.制作動畫然后點擊"窗口-擴展程序"的bodymovin,會提取當(dāng)前項目可提取的文件,然后選中左側(cè)按鈕變紅,再點擊"..."選擇具體的生成路徑和文件名,再點擊左上角的Render則渲染生成.
1.碉堡的Lottie
Airbnb最近開源了一個名叫Lottie的動畫庫,它能夠同時支持iOS,Android與ReactNative的開發(fā).此消息一出,還在苦于探索自定義控件各種炫酷特效的我,興奮地就像發(fā)現(xiàn)的新大陸一般.可以說,Lottie的出現(xiàn),將極大地解放Android/iOS工程師于無盡的編寫原生自定義動畫的工作中.
當(dāng)我們的項目中用GIF實現(xiàn)一些復(fù)雜的視覺效果的時候,會遇到許多的問題.比如,GIF的文件過于龐大,并且對于不同分辨率設(shè)備的適配存在不便,并且Gif格式的色深問題是一個死穴.
比如下面這幾個動畫效果:
http://cdn.trojx.me/blog_pic/Example1.gif
還有這些:
http://cdn.trojx.me/blog_pic/Example2.gif
設(shè)計這些動畫效果顯然不是寫代碼的程序員應(yīng)該負責(zé)的事情.那有沒有什么辦法,能讓美工在AE軟件上設(shè)計的動畫直接用于移動端呢?
有的,那就是使用Lottie.
http://cdn.trojx.me/blog_pic/lottie_sum.png
如上圖所示,通過安裝在AE上的一款名叫bodymovin的插件,能夠?qū)E中的動畫工程文件轉(zhuǎn)換成通用的json格式描述文件,bodymovin插件本身是用于在網(wǎng)頁上呈現(xiàn)各種AE效果的一個開源庫,lottie做的事情就是實現(xiàn)了一個能夠在不同移動端平臺上呈現(xiàn)AE動畫的方式.從而達到動畫文件的一次繪制、一次轉(zhuǎn)換、隨處可用的效果.
當(dāng)然,就如Java一次編譯,隨處運行一樣,lottie本身這個動畫播放庫并不是跨平臺的.
2.上手使用
說了那么多,下面來詳細說說怎樣使用這個碉堡的庫.首先聲明,以下涉及到的軟件可能包含破解版,如果你資金充裕,請支持正版.
以下使用方式與軟件在2017年2月6日都有效.
2.1 安裝Adobe After Effects CC 2017
Adobe是個好公司,做了很多牛逼的軟件,但是無一例外都被國人破解了.本例使用的是最新版的AE CC 2017.
1.單獨下載安裝
http://cdn.trojx.me/blog_pic/AE_CC_2017.png(1)網(wǎng)絡(luò)可用下載地址 :
http://www.dayanzai.me/after-effects-cc-2014.html
(2)CDN分流地址:
http://trojx-me.oss-cn-hangzhou.aliyuncs.com/AE%202017%5BWwW.DaYanZai.Me%5D.rar
感謝作者提供軟件.注意此版本只適用于WIN 64位系統(tǒng),筆者在 Win7 64 位
環(huán)境下能夠正常安裝并使用.安裝過程中按照內(nèi)置說明安裝即可.
2.從軟件列表中安裝
adobe自帶有個adobe creative cloud的桌面應(yīng)用,用于下載各種adobe數(shù)據(jù)處理軟件,下載后在里面找到AE最新版本進行下載
2.2 安裝bodymovin插件
想了解此插件可以參看該插件的GitHub頁面.
下載bodymovin.zxp插件包
此文件位于工程中的/build/extension/目錄下,如果外網(wǎng)速度慢可以從這里可以下載該插件的最新版本.
安裝插件
項目說明中給出了為AE安裝插件的三種方式:
通過第三方軟件ZXP Installer安裝;
手動安裝;
使用Adobe官方插件安裝器安裝
(1)第一種
通過第三方軟件ZXP Installer安裝 http://aescripts.com/learn/zxp-installer/
點擊進行安裝,會自動配置需要的文件,中間可能需要重啟下,不缺文件則直接下載完成,大概12M大小
打開zxp installer,點擊"open"選擇文件,再在彈出的框中選擇"for me",直接導(dǎo)入成功,打開AE - "窗口" - "擴展"就有
(2) 第二種(嘗試第一種無效后,最繁瑣的):
先關(guān)閉AE;
用WinRAR或類似軟件打開bodymovin.zxp文件,并將解壓后的文件夾直接復(fù)制到C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
或者是C:<username>\AppData\Roaming\Adobe\CEP\extensions下,對于MAC機器路徑是/Library/Application\ Support/Adobe/CEP/extensions/bodymovin
http://cdn.trojx.me/blog_pic/bodymovin_zxp_extracted.png
http://cdn.trojx.me/blog_pic/bodymovin_zxp_extracted_copy.png
修改注冊表.對于Windows,打開注冊表修改器,找到HKEY_CURRENT_USER/Software/Adobe/CSXS.6,并在此路徑下添加一個名為PlayerDebugMode的KEY,
并賦值為1;對于MAC,打開文件~/Library/Preferences/com.adobe.CSXS.6.plist并在末尾添加一行,鍵為PlayerDebugMode,值為1.
設(shè)置AE 無論以何種方式安裝bodymovin插件,都需要在AE的編輯->首選項->常規(guī)中勾選允許腳本寫入文件和訪問網(wǎng)絡(luò)(默認不開啟)
http://cdn.trojx.me/blog_pic/ae_setting.png
(3)通過Adobe官方下載
https://helpx.adobe.com/creative-cloud/kb/installingextensionsandaddons.html
直接從Install add-ons的第五步開始,Install third-party extension下載Windows版本的ExMan command-line tool工具
將下載的壓縮包解壓到和 .zxp的bodymovin文件(文件來自github上的android版Lottie文件/build/extension下)放在同個文件夾下
PC端搜索cmd,右鍵選擇以管理員身份運行,然后切換到此文件夾下,輸入命令: ExManCmd.exe /install bodymovin.zxp最后面就是插件的全名,安裝正常則成功.若安裝不正常
安裝都失敗的處理方法:
清除卸載自己電腦上的Adobe其它音視頻處理軟件
下載Adobe官方自帶的清除工具 AdobeCreativeCloudCleanerTools.exe
打開軟件,選擇"e"英文,選擇"y"允許,出現(xiàn)如下列表,是提示要卸載的軟件類型,而不是你電腦上的Adobe軟件,選擇其中的什么cs cc卸載就好,或者你沒使用過這些,就直接選擇"1"all,全部卸載感覺,注冊表也會清理干凈
卸載完成后重新嘗試執(zhí)行以上步驟.
2.3 開始制作動畫
由于筆者目前不會使用AE(廢話,軟件都是剛裝的),這里我們打開一個現(xiàn)有的工程文件.
從這里可以找到一些Lottie中演示過的動畫的AE源文件,下載到本地后在AE中打開即可.這里我們選用EmptyState.aep這個實例工程,稍作修改:
http://cdn.trojx.me/blog_pic/empty_page_editting.png
2.4 導(dǎo)出json數(shù)據(jù)
如果上文的bodymovin插件安裝成功的話,在AE中的窗口->拓展中是能夠找到它的.
http://cdn.trojx.me/blog_pic/ae_bodymovin_menu.png
在插件窗口中選擇json數(shù)據(jù)文件導(dǎo)出的路徑,點擊Render按鈕即可渲染工程并導(dǎo)出,若有多個,則先"Selected"選擇要導(dǎo)出的文件
http://cdn.trojx.me/blog_pic/ae_bodymovin_render.png
原始工程動畫效果:
http://cdn.trojx.me/blog_pic/empty_state_origin.gif
原始工程導(dǎo)出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_origin.json
修改后工程動畫效果:
http://cdn.trojx.me/blog_pic/empty_state_edit.gif
修改后工程導(dǎo)出的json文件:http://cdn.trojx.me/blog_raw/lottie_data_edit.json
2.5 使用Lottie庫播放動畫
簡述源碼:
1.通過LottieComposition去獲取本地或網(wǎng)絡(luò)的json文件
2.LottieComposition的fromJsonSync方法解析json數(shù)據(jù)然后交給addLayer方法,addLayer方法交由Layer類處理得到Layer對象作為LottieComopsition的成員數(shù)據(jù)(Layer處理所有的基礎(chǔ)動畫數(shù)據(jù))
3.將LottieComposition對象設(shè)置給LottieAnimationView這個動畫顯示控件使用,提供一系列的監(jiān)聽,事件,時間的設(shè)置接口.
使用方法:
以Android平臺的使用為例,在項目的build.gradle文件中加入:
1
2
3
4
dependencies {
compile 'com.airbnb.android:lottie:1.0.1'
...
}
Lottie支持Jellybean (API 16)及以上的系統(tǒng),最簡單的使用方式是直接在布局文件中添加:
1
2
3
4
5
6
7
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />
或者,你也可以通過代碼的方式添加.比如從位于app/src/main/assets路徑下的json文件中導(dǎo)入動畫數(shù)據(jù):
1
2
3
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);
這方法將在后臺線程異步加載數(shù)據(jù)文件,并在加載完成后開始渲染顯示動畫.
如果你想復(fù)用加載的動畫,例如下一個ListView中每一項都需要顯示這個動畫,那么你可以這么做:
1
2
3
4
5
6
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
...
LottieComposition composition = LottieComposition.fromJson(getResources(), jsonObject, (composition) -> {
animationView.setComposition(composition);
animationView.playAnimation();
});
你還可以通過API控制動畫,并且設(shè)置一些監(jiān)聽:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
// Do something.
}
...
animationView.setProgress(0.5f);
...
// 自定義速度與時長
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
.setDuration(500);
animator.addUpdateListener(animation -> {
animationView.setProgress(animation.getAnimatedValue());
});
animator.start();
...
animationView.cancelAnimation();
在使用遮罩的情況下,LottieAnimationView 使用 LottieDrawable來渲染動畫.如果需要的話,你可以直接使用drawable形式:
1
2
3
4
LottieDrawable drawable = new LottieDrawable();
LottieComposition.fromAssetFileName(getContext(), "hello-world.json", (composition) -> {
drawable.setComposition(composition);
});
如果你需要頻發(fā)使用某一個動畫,可以使用LottieAnimationView內(nèi)置的一個緩存策略:
LottieAnimationView.setAnimation(String, CacheStrategy)
其中CacheStrategy的值可以是Strong,Weak或者None,它們用來決定LottieAnimationView對已經(jīng)加載并轉(zhuǎn)換好的動畫持有怎樣形式的引用(強引用/弱引用).
3.補充
lottie在ios的使用介紹參考:
http://ios.devdon.com/?p=241&from=trojx.me
分享能在瀏覽器預(yù)覽json動畫數(shù)據(jù)的地址:
http://svgsprite.com/demo/bm/player.php?render=canvas&bg=fff
參考文章： http://www.trojx.me/2017/02/06/android-lottie-library/
