Lottie動畫工具是適用於Android和iOS的行動庫,它可以使用Bodymovin解析以json格式匯出的Adobe After Effects動畫,並在行動裝置上進行原生渲染!
Lottie 在不需要對程式碼進行重寫的情況下讓工程師更加方便的創建更豐富的動畫效果。有了Lottie 你就不再需要使用Gif 動畫來展現效果。
目前,Lottie支援路徑修剪,蒙版、遮蓋等操作。另外還有一個可選的快取機制,對那些頻繁使用的東西能夠更快載入。這款應用程式的目標就是幫助開發者和動畫師能夠更輕鬆的為應用程式創建動畫,從而整體提升互動因素。
1.動畫由設計使用專業的動畫製作工具Adobe After Effects來實現,讓動畫實現更加方便,動畫效果也更好;
2、前端可以方便的呼叫動畫,並對動畫進行控制,減少前端動畫工作量;
3.設計製作動畫,前端展現動畫,專業人做專業事,分工合理;
4.賣家秀即買家秀,還原程度百分之百;
5.使用lottie方案,json檔案大小會比gif檔案小很多,效能也會更好。
1.lottie-web檔本身還是比較大,lottie.js大小為513k,壓縮後也有144k,經過gzip後,大小為39k。所以,需要注意lottie-web的載入。目前H5專案有離線包,PC專案也會上PWA,會對其進行緩存,確保載入速度。
2.lottie動畫其實可以理解為svg動畫/canvas動畫,不能為已存在的html加上動畫效果;
3.動畫json檔案的匯出,目前是將AE裡面的參數一一匯出成json內容,如果設計師建了很多的圖層,可能還是有json檔案比較大(20kb)的問題。需要設計師遵循一定的規範。
4.有很少量的AE動畫效果,lottie無法實現,有些是因為效能問題,有些是沒有做。比如:描邊動畫等。