lottie_logo.png
Examples1-3.gif
Community 2_3.gif
<a > Lottie(https://www.lottiefiles.com)</a>是Android和iOS的移動圖書館，可解析Adobe After Effects動畫，并以bodymovin作為json導出，并通過React Native在本機上呈現矢量動畫！
設計師可以創建和運送美麗的動畫，而無需工程師手動重新創建它。由于動畫由JSON支持，因此它們的體積非常小，但復雜程度可能很大！動畫可以播放，調整大小，循環，加速，減慢，甚至交互。
Lottie 動畫其實就是加載通過AE導出的一個JSON文件, 設計師先通過AE把動畫制作好, 然后通過bodymovin插件導出文件, 如果動畫需要圖片, 也需要把圖片導出. 就可以了, 對于比較復雜的動畫來說, Lottie就是福音呀, 在于不用寫復雜的動畫代碼了.
使用:
使用cocoaPod導入Lottie動畫庫
pod 'lottie-ios'
導入Lottie頭文件
#import <Lottie/Lottie.h>
執行動畫的代碼
//data就是一個json文件, data.json, 這個文件可以自己通過AE來制作, 也可以去https://www.lottiefiles.com去下載文件
LOTAnimationView *animation = [LOTAnimationView animationNamed:@"data"];
[self.view addSubview:animation];
animation.frame = self.view.bounds;
animation.contentMode = UIViewContentModeScaleAspectFit;
animation.loopAnimation = YES;
[animation playWithCompletion:^(BOOL animationFinished) {
NSLog(@"succ");
}];
這樣一個復雜的動畫界制作完成了.
如果動畫需要圖片別忘了把圖片也導入工程
除了加載本地文件之外, Lottie也支持加載網絡文件
LOTAnimationView *animation = [[LOTAnimationView alloc] initWithContentsOfURL:[NSURL URLWithString:URL]];
[self.view addSubview:animation];
Lottie目前來說加載動畫很流暢, 很輕量級, 加載復雜的動畫再也不需要使用Gif圖了, 而且是一套動畫的json文件可以再iOS, Android, Web上運行, 大大節省了編寫動畫的時間. 但是目前Lottie的動畫交互不好, 不能根據用戶的操作, 把動畫分為介個步驟來執行, 交互還需解決, 另外執行動畫的json源文件可獨性太差, 再次編輯的伴讀很大, 如果需要修改, 還需AE重新導出.
<a >Lottie動效庫<a>
<a >Lottie GItHub地址<a>
