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

相信大家對Lottie并不陌生，它是Airbnb 開發(fā)的面向 iOS、Android、React Native 的動畫庫，設(shè)計師只需要在 After Effects 設(shè)計出想要的動畫，然后導(dǎo)出成 JSON文件交給開發(fā)工程師，開發(fā)工程師就可以將動畫 100% 還原到你的產(chǎn)品中。

“100%還原動畫”“降低開發(fā)成本”聽起來仿佛很美好，我也是寄希望Lottie能解決welcome page里的動效。但是我在前期跟開發(fā)工程師初步探索Lottie后發(fā)現(xiàn)，它僅支持AE里形狀動效，在實際的UI項目中，如果限制設(shè)計師只用形狀圖層的方式去做頁面，對設(shè)計師的表現(xiàn)來說是一種掣肘。

直到今年5月，在封面新聞4.0版本里，底部tab欄優(yōu)化中Lottie派上了用場。先附上優(yōu)化前后對比圖。

底部tab欄是用戶高頻操作區(qū)域，適當(dāng)增加點擊時的微交互可以讓用戶更容易感知到自己在app中所在的位置，而且俏皮的動效也能帶給用戶情感化的體驗。最重要的是，tab欄點擊的動效是一種微交互，它通過icon的大小、位置、透明度等屬性改變而形成，Lottie完全能承載這些屬性的變化。

下面就介紹一下具體的實操步驟。

一：在設(shè)計稿中對圖標的大小做好標注。

具體的開發(fā)實現(xiàn)工程中，只有動起來的那部分是靠Lottie實現(xiàn)的，tab欄icon點擊前后的靜態(tài)圖還是按照設(shè)計規(guī)范來切圖和標注。

這一步很重要，在AE里新建合成的大小跟靜態(tài)切圖的大小一定是等比例的，不然會出現(xiàn)動效和靜態(tài)圖無法重合的問題。

二：在AE里新建合成重新繪制圖形

我給開發(fā)工程師的靜態(tài)圖是按照69px*69px的大小切的，我在AE里新建的合成是330px*330px(方便操作的大小即可），為了靜態(tài)圖與動效對齊，我把靜態(tài)圖等比例放大到330px，把圖片拖到AE文件里作為底圖，我直接在AE里繪制形狀，繪制時注意與底圖保持一致。

三：制作icon動效

我預(yù)想的動效是從左至右展開icon。通過“修剪路徑”工具可以實現(xiàn)。在圖層下點擊“添加—-修剪路徑”，調(diào)整結(jié)束和開始的位置，每個形狀圖層都需要分開調(diào)整。

四：生成預(yù)合成放在整體頁面中微調(diào)

這一步可以從整體頁面上觀察做出來的動效是否OK，最開始我是想每一個icon的動效都不同，但實際效果并不好。我又返回去調(diào)整再觀察再調(diào)整直致滿意為止。

四：用bodymovin導(dǎo)出每一個icon的動效

整體效果OK后，就可以分開把每個預(yù)合成里的icon動效導(dǎo)出成json文件，“窗口——擴展——bodymoving”會打開一個操作框，選擇好導(dǎo)出文件的地址，點擊"render"按鈕，就可以生成對應(yīng)的json文件啦～

希望之后能有更多的實際場景能用Lottie去實現(xiàn)動效，也希望這個Lottie這個產(chǎn)品本身能迭代地更好。如果你也希望能把Lottie制作動效的方式用在實際項目中，希望我的這篇文章能給你一些啟發(fā)，也歡迎大家一起來討論。

這篇文章對Lottie支持的AE屬性和軟件的安裝都有詳細的介紹，推薦。http://www.htnj110.cn/detail/199429.html