原文: www.jianshu.com/p/83f6a228b…
為了提升使用者體驗, 在介面中加入一個設計良好的介面動畫成為app設計的潮流. 之前聽有人說過專業的介面動畫是要有設計師、工程師、程式設計師、平面動畫師等組成, 想想這是一個多大的任務量啊. 而且裡面的各種邏輯處理, 複雜一些的動畫, 一般人幾乎是望其項背;
但有了Lottie之後, 就大大降低了開發者的難度. 我們可以直接把Lottie的動畫檔案匯入, 設定一下引數, 就可以使用這個動畫了. 為了滿足大家的好奇心, 先附幾個簡單的例項:
一. 初識Lottie
通過AE上的Bodymovin外掛將AE中製作好的動畫匯出成一個json檔案，Lottie實現了iOS/macOS/Android/React Native三個平臺對該json檔案的解析和渲染。
所有這些動畫都是在After Effects中建立的，使用Bodymovin匯出，並且無需額外的工程師工作即可完成原生渲染。
Bodymovin是一個又Hernan Torrisi建立的After Effects外掛，匯出檔案格式為json和包括一個javascript網路播放器。而它最大的優點是提供了一套完整的跨平臺動畫實現工作流;
從程式碼上看，iOS端是基於layer，而最終都是對canvas的操作，中間除去解析json外，基本無耗費效能的行為。
當然也不可能都那麼完美, 畢竟開源不久, 它仍然存在以下問題:
- Bodymovin外掛待完善，仍然有部分AE效果無法成功匯出；
- Lottie對json檔案的支援待完善，目前有部分能成功匯出成json檔案的效果在移動端上無法很好的展現；
- 目前不支援文字，所有文字必須轉成向量圖才能正常展現動畫；
- 動畫無法被編輯，即移動端無法更改遠端下載到本地的動畫；
- 文件更新不及時等;
注:
iOS需要iOS8及以上, 安卓需要API14及以上;
二. 如何用Bodymovin外掛製作動畫
iTerryWang在他的簡書部落格裡詳細介紹瞭如何使用Bodymovin外掛製作動畫, 我就不多說了, 也同時感謝一下iTerryWang的分享;
Lottie簡介 & iOS整合使用
三. 如何使用Lottie
1. 下載Lottie動畫檔案
除了用Bodymovin外掛建立動畫外, 我們還可以在Lottie Files下載;
Lottie Files是一個擁有高質量Lottie檔案格式動畫的網站。在這個網站，不僅設計師可以在上面陳列他們的動畫而且還提供免費下載. 這步結束後, 我們就準備好了動畫所需的JSON檔案;
2. 新建工程
新建一個工程, 命名為LottieTest;
3. 匯入Lottie動畫庫
用CocoaPods安裝Lottie動畫庫:
在終端進行如下操作:
①進入檔案目錄(檔案目錄要用自己的工程目錄);
cd /Users/apple/Desktop/LottieTest複製程式碼②建立podfile
pod init複製程式碼③開啟檔案編輯
target `LottieTest` do
pod `lottie-ios`
end複製程式碼④匯入Lottie專案
pod install複製程式碼4. 新增Lottie動畫的JSON檔案
之前已經準備好這個檔案了, 匯入工程就行;
5. 建立動畫
OC版:
#import "ViewController.h"
#import <Lottie/Lottie.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
LOTAnimationView *lottieTest = [LOTAnimationView animationNamed:@"servishero_loading"];
lottieTest.contentMode = LOTViewContentModeScaleAspectFill;
lottieTest.frame = self.view.bounds;
lottieTest.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;
[self.view addSubview:lottieTest];
[lottieTest play];
}
@end複製程式碼swift版:
import UIKit
import Lottie
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
if let animationView = LOTAnimationView(name: "servishero_loading") {
// if let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/LottieLogo1.json")!) {
animationView.frame = self.view.bounds
animationView.center = self.view.center
animationView.loopAnimation = true
animationView.contentMode = .scaleAspectFill
animationView.animationSpeed = 0.5
// Applying UIView animation
let minimizeTransform = CGAffineTransform(scaleX: 0.1, y: 0.1)
animationView.transform = minimizeTransform
UIView.animate(withDuration: 3.0, delay: 0.0, options: [.repeat, .autoreverse], animations: {
animationView.transform = CGAffineTransform.identity
}, completion: nil)
view.addSubview(animationView)
animationView.play()
}
}
}複製程式碼至於android, reactNative參照下方github地址:
android
reactNative
擴充套件:
Airbnb 動畫庫Lottie