Lottie 讀取 JSON 文件實現動畫

Lottie

Lottie 是 Airbnb 開源的一個動畫項目，它支持 iOS, mac OS Android RN，因爲某些複雜動畫的實現，每每會寫不少的 code 來實現它，並且調試動畫的效果會比較花費時間。用它來解決某些動畫會帶來很大的便利。

設計師在 After Effects 設計好相關的動畫，而後安裝上 BodyMovin 這個插件，這個插件，能夠幫導出動畫效果的 JSON 文件，而後咱們能夠經過 Lottie 來加載相關的 JSON 文件來實現動畫效果。

優點

• 開發能夠方便的實現動畫，節約調試動畫效果時間等，不用寫一大堆 code 去實現動畫，只要設計給相關的 JSON 文件就能夠了。

• 多個平臺能夠共用，例如 iOS 和 Android，公用一個動畫。

• 能夠經過 URL 的方式加載 JSON 文件，來替換客戶端動畫，不用發版本了

• 設計想了一個屌炸天的動畫，而後給到開發，開發說這個實現不了，或者說很費時間，而後讓設計用這種方式去實現。

• 對於 iOS 來講支持 ViewController 轉場動畫

• iOS 平臺上用 Core Animation 作矢量動畫。性能不錯，並且有緩存

• 對比於用 GIF 動畫，手寫動畫，輕量，性能和存儲上都更佳。

不足之處

• iOS 版本要 >= 8.0 纔可使用。不支持 7.x

• 對於一些交互性的動畫，支持不是很好。主要是對於播放性的動畫

• Bodymovin 插件待完善，仍然有部分 AE 效果沒法成功導出

• 動畫沒法被編輯，加載下來是什麼樣子，就原封不動

基礎用法

Demo 裏面的素材是來自官網的。把相關動畫的 JSON 文件導入工程中。這裏咱們拿了 LottieLogo1.json 這個文件。而後用 LOTAnimationView 生成一個動畫的 View 代碼以下:

- (LOTAnimationView *)logo {
    if (!_logo) {
        // 經過傳入相關的 JSON 文件來呈現動畫。
        _logo = [LOTAnimationView animationNamed:@"LottieLogo1"];
        // 設置 View 的 contentMode
        _logo.contentMode = UIViewContentModeScaleAspectFill;
    }
    return _logo;
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    // 播放動畫
    [self.logo play];
}

而後經過

• [self.logo play] 就能夠播放動畫

• [self.logo pause] 中止動畫，若是調用完這個方法，再調用 play 會接着上次動畫中止的地方繼續執行

• initWithContentsOfURL 經過傳入一個 NSURL 來加載 JSON 動畫

• isAnimationPlaying 動畫是否正在執行

• loopAnimation 是否循環播放動畫

• animationProgress 動畫的進度

• animationDuration 動畫時長

• self.logo.animationProgress = 0.0f 把動畫定位到某一個幀。

• [self.logo playWithCompletion:^(BOOL animationFinished) {}] 設置動畫執行完回調

ViewController 轉場動畫

經過 LOTAnimationTransitionController 來實現 presentViewController 和 dismissViewControllerAnimated 轉場動畫

- (IBAction)btnTapped {
    BViewController *b = [BViewController new];
    b.transitioningDelegate = self;
    [self presentViewController:b animated:YES completion:nil];
}

#pragma mark - UIViewControllerTransitioningDelegate
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                  presentingController:(UIViewController *)presenting
                                                                      sourceController:(UIViewController *)source {
    // vcTransition1.json 是一個動畫的 json 文件，傳參的時候，不用帶後綴 .json
    LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition1"
                                                                                                              fromLayerNamed:@"outLayer"
                                                                                                                toLayerNamed:@"inLayer"];
    // 返回一個準守 UIViewControllerAnimatedTransitioning 協議對象
    return animationController;
}


- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
    LOTAnimationTransitionController *animationController = [[LOTAnimationTransitionController alloc] initWithAnimationNamed:@"vcTransition2"
                                                                                                              fromLayerNamed:@"outLayer"
                                                                                                                toLayerNamed:@"inLayer"];
    return animationController;
}

URL 方式加載

這種方式會有緩存，要 kill 掉 App, 下次進入頁面纔會有新的動畫。

- (LOTAnimationView *)animationView {
    if (!_animationView) {
        NSURL *URL = [NSURL URLWithString:@"http://127.0.0.1:8990/LottieLogo1.json"];
        _animationView = [[LOTAnimationView alloc] initWithContentsOfURL:URL];
        _animationView.contentMode = UIViewContentModeScaleAspectFill;
    }
    return _animationView;
}

其餘

lottie Demo 一個輸入鍵盤字母的的動畫，裏面的實現是定義一個 collectionView，每一個字母實際上是一個 UICollectionViewCell, Cell 裏面有個 subView 是 LOTAnimationView。而後有個 UITextField，不過放在屏幕外面看不到。來調起鍵盤，字母的動畫主要靠 LOTAnimationView 實現,而後項目裏面要有全部字母的動畫 JSON 文件。

lottie Tutorial 視頻 設計和開發均可以參考

lottie-ios lottie-ios

LottieFiles 動畫資源下載，上面有 json 和 aep 文件能夠拿來用