為了提升用戶體驗(yàn), 在界面中加入一個(gè)設(shè)計(jì)良好的界面動(dòng)畫(huà)成為app設(shè)計(jì)的潮流. 之前聽(tīng)有人說(shuō)過(guò)專業(yè)的界面動(dòng)畫(huà)是要有設(shè)計(jì)師塔拳、工程師劲赠、程序員涛目、平面動(dòng)畫(huà)師等組成, 想想這是一個(gè)多大的任務(wù)量啊. 而且里面的各種邏輯處理, 復(fù)雜一些的動(dòng)畫(huà), 一般人幾乎是望其項(xiàng)背;
但有了Lottie之后, 就大大降低了開(kāi)發(fā)者的難度. 我們可以直接把Lottie的動(dòng)畫(huà)文件導(dǎo)入, 設(shè)置一下參數(shù), 就可以使用這個(gè)動(dòng)畫(huà)了. 為了滿足大家的好奇心, 先附幾個(gè)簡(jiǎn)單的實(shí)例:
一. 初識(shí)Lottie
通過(guò)AE上的Bodymovin插件將AE中制作好的動(dòng)畫(huà)導(dǎo)出成一個(gè)json文件，Lottie實(shí)現(xiàn)了iOS/macOS/Android/React Native三個(gè)平臺(tái)對(duì)該json文件的解析和渲染凛澎。
所有這些動(dòng)畫(huà)都是在After Effects中創(chuàng)建的霹肝，使用Bodymovin導(dǎo)出，并且無(wú)需額外的工程師工作即可完成原生渲染塑煎。
Bodymovin是一個(gè)又Hernan Torrisi創(chuàng)建的After Effects插件沫换，導(dǎo)出文件格式為json和包括一個(gè)javascript網(wǎng)絡(luò)播放器。而它最大的優(yōu)點(diǎn)是提供了一套完整的跨平臺(tái)動(dòng)畫(huà)實(shí)現(xiàn)工作流;
從代碼上看最铁，iOS端是基于layer讯赏，而最終都是對(duì)canvas的操作，中間除去解析json外冷尉，基本無(wú)耗費(fèi)性能的行為漱挎。
當(dāng)然也不可能都那么完美, 畢竟開(kāi)源不久, 它仍然存在以下問(wèn)題:
- Bodymovin插件待完善，仍然有部分AE效果無(wú)法成功導(dǎo)出雀哨；
- Lottie對(duì)json文件的支持待完善磕谅，目前有部分能成功導(dǎo)出成json文件的效果在移動(dòng)端上無(wú)法很好的展現(xiàn)；
- 目前不支持文字雾棺，所有文字必須轉(zhuǎn)成矢量圖才能正常展現(xiàn)動(dòng)畫(huà)膊夹；
- 動(dòng)畫(huà)無(wú)法被編輯，即移動(dòng)端無(wú)法更改遠(yuǎn)端下載到本地的動(dòng)畫(huà)捌浩；
- 文檔更新不及時(shí)等;
注:
iOS需要iOS8及以上, 安卓需要API14及以上;
二. 如何用Bodymovin插件制作動(dòng)畫(huà)
iTerryWang在他的簡(jiǎn)書(shū)博客里詳細(xì)介紹了如何使用Bodymovin插件制作動(dòng)畫(huà), 我就不多說(shuō)了, 也同時(shí)感謝一下iTerryWang的分享;
Lottie簡(jiǎn)介 & iOS集成使用
三. 如何使用Lottie
1. 下載Lottie動(dòng)畫(huà)文件
除了用Bodymovin插件創(chuàng)建動(dòng)畫(huà)外, 我們還可以在Lottie Files下載;
Lottie Files是一個(gè)擁有高質(zhì)量Lottie文件格式動(dòng)畫(huà)的網(wǎng)站放刨。在這個(gè)網(wǎng)站，不僅設(shè)計(jì)師可以在上面陳列他們的動(dòng)畫(huà)而且還提供免費(fèi)下載. 這步結(jié)束后, 我們就準(zhǔn)備好了動(dòng)畫(huà)所需的JSON文件;
2. 新建工程
新建一個(gè)工程, 命名為L(zhǎng)ottieTest;
3. 導(dǎo)入Lottie動(dòng)畫(huà)庫(kù)
用CocoaPods安裝Lottie動(dòng)畫(huà)庫(kù):
在終端進(jìn)行如下操作:
①進(jìn)入文件目錄(文件目錄要用自己的工程目錄);
cd /Users/apple/Desktop/LottieTest
②創(chuàng)建podfile
pod init
③打開(kāi)文件編輯
target 'LottieTest' do
pod 'lottie-ios'
end
④導(dǎo)入Lottie項(xiàng)目
pod install
4. 添加Lottie動(dòng)畫(huà)的JSON文件
之前已經(jīng)準(zhǔn)備好這個(gè)文件了, 導(dǎo)入工程就行;
5. 創(chuàng)建動(dòng)畫(huà)
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
擴(kuò)展:
Airbnb 動(dòng)畫(huà)庫(kù)Lottie
