Lottie應(yīng)用于React Native浴井、iOS和Android
Lottie組件接癌，應(yīng)用于React Native(Android 和iOS)
- 本文由CRAnimation團(tuán)隊(duì)翻譯
- 本項(xiàng)目原地址：airbnb/lottie-react-native
- Lottie-iOS譯文地址：CRAnimation/lottie-iOS
- Lottie-Android譯文地址：CRAnimation/lottie-Android
- Lottie-React-Native譯文地址：CRAnimation/lottie-react-native
- 翻譯：小9
- 校正：熊熊
- 術(shù)語(yǔ)指導(dǎo)：西西
- QQ群：547897182（iOS動(dòng)效特工隊(duì)疙筹，入群請(qǐng)?zhí)峁﹤€(gè)人主頁(yè)或github賬號(hào)）
Lottie 是一個(gè)可應(yīng)用于Andriod和iOS的動(dòng)畫(huà)庫(kù)，它通過(guò)bodymovin插件來(lái)解析Adobe After Effects 動(dòng)畫(huà)并導(dǎo)出為json文件，并通過(guò)手機(jī)端原生方式渲染出來(lái)蒋院。
這是前所未有的方式桃焕，設(shè)計(jì)師可以創(chuàng)作并且運(yùn)行優(yōu)美的動(dòng)畫(huà)而不需要工程師煞費(fèi)苦心地通過(guò)手動(dòng)調(diào)整的方式來(lái)重現(xiàn)動(dòng)畫(huà)剑肯。有人說(shuō)一張圖片可以頂?shù)纳?000個(gè)字，那么下面就算13000個(gè)字了：
所有的動(dòng)畫(huà)都是通過(guò)After Effects創(chuàng)作出來(lái)观堂，用bodymovin插件導(dǎo)出让网，不需要任何額外的工作就可以以原生的方式渲染出來(lái)。
相關(guān)的項(xiàng)目文件
這個(gè)項(xiàng)目只是用代碼對(duì)Lottie進(jìn)行包裝并暴露給React Native师痕。你可以從各自對(duì)應(yīng)的庫(kù)中找到解析和渲染的代碼溃睹。
Lottie for iOS
Lottie for Android
安裝
你可以通過(guò)安裝node模塊來(lái)開(kāi)始lottie：
npm i --save lottie-react-native
如果你在iOS中使用CocoaPods的話，你可以在Podfile中添加下面的代碼：
pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'
如果你在iOS中沒(méi)有用CocoaPods的話胰坟，你可以用react-native link:
react-native link lottie-ios
react-native link lottie-react-native/
針對(duì)Android系統(tǒng)因篇，你也可以用react-native link:
react-native link lottie-react-native
如果對(duì)此有任何困惑的話，請(qǐng)?zhí)砑觟ssue笔横。
基礎(chǔ)的用法：
查看所有組件的API
Lottie 的動(dòng)畫(huà)進(jìn)度可以通過(guò)改變Animated的Value來(lái)控制：
import React from 'react';
import { Animated } from 'react-native';
import Animation from 'lottie-react-native';
export default class BasicExample extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: new Animated.Value(0),
};
}
componentDidMount() {
Animated.timing(this.state.progress, {
toValue: 1,
duration: 5000,
}).start();
}
render() {
return (
<Animation
style={{
width: 200,
height: 200,
}}
source={require('../path/to/animation.json')}
progress={this.state.progress}
/>
);
}
}
此外竞滓，還有一些API有時(shí)候會(huì)更簡(jiǎn)單：
import React from 'react';
import Animation from 'lottie-react-native';
export default class BasicExample extends React.Component {
componentDidMount() {
this.animation.play();
}
render() {
return (
<Animation
ref={animation => { this.animation = animation; }}
style={{
width: 200,
height: 200,
}}
source={require('../path/to/animation.json')}
/>
);
}
}
運(yùn)行示例工程
你可以通過(guò)以下命令來(lái)檢出示例工程：
- 克隆倉(cāng)庫(kù):
git clone https://github.com/airbnb/lottie-react-native.git - 打開(kāi)目錄：
cd lottie-react-native并且安裝:npm install - 通過(guò)
npm start啟動(dòng)packager - 在另一個(gè)命令行窗口，按如下步驟操作：
針對(duì)iOS：
- 如果你沒(méi)有用CocoaPods安裝吹缔，就執(zhí)行
sudo gem install cocoapods - 安裝pods：
npm run build:pods - 運(yùn)行示例代碼：
npm run run:ios
針對(duì)Android：
- 運(yùn)行示例代碼：
npm run run:android
故障排查
如果你在運(yùn)行pod install時(shí)出現(xiàn)：
[!] Unable to find a specification for `lottie-ios`
那么執(zhí)行pod repo update 再嘗試
替代方案
- 手動(dòng)地創(chuàng)建動(dòng)畫(huà)商佑。手動(dòng)創(chuàng)建動(dòng)畫(huà)對(duì)于設(shè)計(jì)師以及iOS、Android工程師而言意味著付出巨額的時(shí)間厢塘。通常很難茶没，甚至不可能證明花費(fèi)這么多時(shí)間來(lái)獲得動(dòng)畫(huà)是正確的肌幽。
- Facebook Keyframes。 Keyframes是專門用來(lái)構(gòu)建用戶界面的抓半， 是FaceBook的一個(gè)很棒喂急，很新的庫(kù)。但是Keyframes不支持一些Lottie所能支持的特性笛求，比如： 遮罩煮岁，蒙版，裁切路徑涣易，虛線樣式還有很多画机。
- Gifs。Gifs 占用的大小是bodymovin生成的JSON大小的2倍還多新症，并且渲染的尺寸是固定的步氏，并不能放大來(lái)適應(yīng)更大更高分辨率的屏幕。
- Png序列楨動(dòng)畫(huà)徒爹。 Png序列楨動(dòng)畫(huà) 甚至比gifs更糟糕荚醒，它們的文件大小通常是 bodymovin json文件大小的30-50倍，并且也不能被放大隆嗅。
為什么叫Lottie界阁？
Lottie是以德國(guó)剪影動(dòng)畫(huà)先驅(qū)Lotte Reiniger（洛特·雷妮格）的名字命名的。 她最出名的作品是《阿基米德王子歷險(xiǎn)記》 (1926) – 世界上第一部長(zhǎng)篇?jiǎng)赢?huà)電影胖喳。 比華爾特·迪士尼的長(zhǎng)篇?jiǎng)赢?huà)電影——《白雪公主與七個(gè)小矮人》 (1937) 還要早了10年泡躯。The art of Lotte Reineger
貢獻(xiàn)
請(qǐng)查看：Contributors Guide
