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