介紹
如果你還不知道Lottie是什么, 那你真的out了.
如果把iOS動畫分為兩類: 交互式動畫, 播放式動畫, 那么其中的播放動畫完全可以使用Lottie來完成, 例如:
作為收藏按鈕, 是不是很活潑?
返回與菜單之間的切換, 生動有趣!
還有各種形變動畫.
這里先放上Lottie的地址: https://github.com/airbnb/lottie-ios
更棒的是, Lottie有各種不同的版本, 安卓, iOS, 前端都可以使用, 理論上動畫做一套就可以共用, 大大的減少了工作量.
使用方法
- 集成環(huán)境: 移動端同學集成Lottie框架, UI/UE同學集成AE的bodymovin插件
- 制作動畫, 導出文件, 拖進工程
- 創(chuàng)建LOTAnimationView, 并播放
非常簡單, 下面看兩個實際例子
實戰(zhàn)
先看第一個例子:
典型的形變動畫加上幾個普通動畫融合在一起, 如果由程序員來寫, 確實還要花一番心思, 使用Lottie就非常容易了.
viewDidLoad時加載動畫, 在視圖顯示出來時播放, 播放完了移除. 就是這么簡單.
- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
if (_launchMask && _launchAnimation) {
WeakObj(self);
[_launchAnimation playWithCompletion:^(BOOL animationFinished) {
[UIView animateWithDuration:0.3 animations:^{
selfWeak.launchMask.alpha = 0;
} completion:^(BOOL finished) {
[selfWeak.launchAnimation removeFromSuperview];
selfWeak.launchAnimation = nil;
[selfWeak.launchMask removeFromSuperview];
selfWeak.launchMask = nil;
}];
}];
}
}
- (void)setupLaunchMask{
_launchMask = [[UIView alloc] initWithFrame:self.view.bounds];
[JRKeyWindow addSubview:_launchMask];
_launchAnimation = [LOTAnimationView animationNamed:@"data"];
_launchAnimation.cacheEnable = NO;
_launchAnimation.frame = self.view.bounds;
_launchAnimation.contentMode = UIViewContentModeScaleToFill;
_launchAnimation.animationSpeed = 1.2;
[_launchMask addSubview:_launchAnimation];
}
甚至可以用在引導頁中, 代碼都很簡單, 就不重復貼了. 值得注意的是, 像這樣多次使用到Lottie時一定要注意素材的名字不能一樣, 否則動畫就是錯亂的, 簡單講一講怎么改.
這是一個動畫資源的文件結構, 如果修改了img_0.png及其文件夾, 則需要在Json文件中修改對應的內容
這就是Json文件中的內容, 最上面一部分包含了素材路徑, 素材名稱, 注意修改好就ok.
第二個例子:
動畫有小魚的尾巴搖動, 眼睛眨, 魚鰭煽動, 背后的小泡泡時隱時現(xiàn), 隨機運動, 這讓程序員來一個個寫, 效率必然很低. 使用Lottie則簡單很多, 我們公司的高級UI寫完這個簡直不要太輕松.
讓UI同學導出動畫時將第一幀截取出來作為啟動頁靜態(tài)圖, 在第一個視圖加載的地方設置動態(tài)動畫.
- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
if (_launchMask && _launchAnimation) {
WeakObj(self);
[_launchAnimation playWithCompletion:^(BOOL animationFinished) {
[UIView animateWithDuration:0.3 animations:^{
selfWeak.launchMask.alpha = 0;
} completion:^(BOOL finished) {
[selfWeak.launchAnimation removeFromSuperview];
selfWeak.launchAnimation = nil;
[selfWeak.launchMask removeFromSuperview];
selfWeak.launchMask = nil;
}];
}];
}
}
- (void)setupLaunchMask{
_launchMask = [UIImageView imageViewWithFrame:self.view.bounds image:[UIImage imageNamed:@"launchAnimationBg"]];
[self.view addSubview:_launchMask];
_launchAnimation = [LOTAnimationView animationNamed:@"launchAnimation"];
_launchAnimation.cacheEnable = NO;
_launchAnimation.frame = self.view.bounds;
_launchAnimation.contentMode = UIViewContentModeScaleToFill;
_launchAnimation.animationSpeed = 1.2;
[_launchMask addSubview:_launchAnimation];
}
幾點值得注意的是:
我這創(chuàng)建一個UIImageView作為背景, 是拆分了動畫, 將不動的部分作為背景, 避免內存中加載的圖片過多, 后面會細說這個問題.
LOTAnimationView這個類就是動畫本身了, 也可以設置contentMode, 所以為了適配, 這個屬性應該與啟動頁圖片一致(建議啟動頁用Storyboard + UIImageView).
在視圖加載完成之后調用_launchAnimation的play方法, 完成之后漸變色隱藏并置空.
很容易的, 一個精美的啟動動畫就完成了.
總結
看完了本篇文章, 你會發(fā)現(xiàn)動畫竟然如此簡單, 那我們以后動畫全用Lottie來實現(xiàn)? 其實Lottie也有一定的限制
Lottie是基于CALayer的動畫, 所有的路徑預先在AE中計算好, 轉換為Json文件, 然后自動轉換為Layer的動畫, 所以性能理論上是非常不錯的, 在實際使用中, 確實很不錯, 但是有幾點需要注意的:
如果使用了素材, 那么素材圖片的每個像素都會直接加載進內存, 并且是不能釋放掉的(實測, 在框架中有個管理cache的類, 并沒有啟動到作用, 若大家找到方法請告訴我), 所以, 如果是一些小圖片, 加載進去也還好, 但是如果是整頁的啟動動畫, 如上面的啟動頁動畫, 不拆分一下素材, 可能一個啟動頁所需要的內存就是50MB以上. 如果不使用素材, 而是在AE中直接繪制則沒有這個問題.
如果使用的PS中繪制的素材, 在AE中做動畫, 可能在動畫導出的素材中出現(xiàn)黑邊, 我的解決辦法是將素材拖入PS去掉黑邊, 同名替換.
拆分素材的辦法是將一個動畫中靜態(tài)的部分直接切出來加載, 動的部分單獨做動畫
如果一個項目中使用了多個Lottie的動畫, 需要注意Json文件中的路徑及素材名稱不能重復, 否則會錯亂
不支持漸變色
不支持AE中的mask屬性
Lottie先天就支持播放式動畫, 對于交互式動畫有個animationProgress的屬性(待核實)
基于以上的問題, 建議使用Lottie的場合為復雜的播放式形變動畫, 因為形變動畫由程序員一點點的寫路徑確實不直觀且效率低. 但即便如此, Lottie也是我們在CoreAnimation之后一個很好的補充.
以上健唄的Demo地址: https://github.com/syik/JR
直播伴侶地址: https://github.com/syik/BulletAnalyzer
這是一個已經上架的App, 大家可以直接在App Store中找到使用. 上一篇文章為此App中CoreAnimation與CoreGraphics可交互式圖表實戰(zhàn).
若大家覺得寫得有用, 不吝嗇打賞一個Star~, 謝謝~
