起因: 最近閑下來之后, 覺得公司項目里有些地方可以優(yōu)化一下過度效果, 所以開啟了逛開發(fā)者論壇的模式, 搜到了好多做動畫的技術框架, 這些框架寫的都很好, 不過都不太符合我心中的預期, 直到看到愛彼迎的Lottie動畫,眼前一亮
先來說說以前用到的動畫的缺點(純屬個人經(jīng)驗)
1: 編碼, 因為好多自定制效果需要我們開發(fā)人員自己去思考的,耗費腦細胞不說, 在工期上也不好把握,特別是在敏捷式開發(fā)為主流的今天......
2: 性能, 一些非常酷炫的動畫需要靠美工小姐姐給我們gif圖片, 當gif圖片量很大的時候,性能就成了一個問題, 就算是用原生自己寫, 也要考慮繪制性能的問題
3: 不能跨平臺, 在實際開發(fā)當中為了追求各端的一致性, 通常都會要美工給gif圖......不然就是所有開發(fā)們 一起耗費腦細胞
4: 時效性, 如果產(chǎn)品給的需求是 動畫需要產(chǎn)品在后臺手動控制, 那前端就很窩火兒了, 我以前的做法是, 用做換膚的那套方案, 讓產(chǎn)品把各種資源文件打包上傳,但gif過大的話,也是個問題......
什么是Lottie
“Lottie is a library for Android, iOS, Web, and Windows that parse Adobe After Effects animations exported as json with bodymovin and renders them natively on mobile and on the web!” - 自官網(wǎng)：http://airbnb.io/lottie/#/
翻譯:
Lottie可以播放 使用bodymovin從Adobe After Effects中導出的json文件, 并且可以在 iOS胯努、Android逢防、macOS、React Native 和 Windows 中進行解析使用的開源庫
針對于上面做動畫的一些缺點, 來比對一下Lottie的優(yōu)勢
1:編碼: 代碼量很少(下文例子會出現(xiàn))
2:性能: 性能很高,我播放了好幾個動畫, 內(nèi)存幾乎沒怎么變化
3:能跨平臺: 這在很大程度上解決了多端效果不一致的問題
4:所占的空間比較小: 無論是下載還是被當成資源文件集成到項目中來, 一個json文件充其量就是幾十到幾百kb, 和動不動就好幾M的gif比,那可省多了,對App瘦身是一個很大的幫助
5:節(jié)省開發(fā)時間, 不管美工設計出了什么復雜動畫,只要能給我們開發(fā)這份json文件, 我們就可以完全可以節(jié)約做動畫所帶來的開發(fā)成本,而且設計師可以大膽的進行UE設計
舉個例子吧
import UIKit
import Lottie
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white
let animationView = AnimationView(name: "159-animation")
let width = self.view.frame.size.width
animationView.frame = CGRect(x: 10, y: 50, width: width - 20, height: width - 20);
animationView.center = self.view.center
animationView.loopMode = .loop
animationView.contentMode = .scaleAspectFill
animationView.animationSpeed = 0.5
view.addSubview(animationView)
animationView.play()
}
}
效果
很簡單吧!!!
遷移:
從代碼里可以看出 Lottie的的載體是一個view, 根據(jù)這一點 我們能有好多騷操作, 只要我們能找到這個view, 比如自定義帶動畫的tabbar, 比如自定義上拉加載, 下拉刷新的動畫, 路由跳轉的動畫, 總之一切基于view能實現(xiàn)的動畫, 我想都可以用Lottie實現(xiàn)
,可以粗略的理解為 view是個播放器, 播放json文件動畫
