Lottie應用于React Native、iOS和Android
Lottie組件，應用于React Native(Android 和iOS)
- 本文由CRAnimation團隊翻譯
- 本項目原地址：airbnb/lottie-react-native
- Lottie-iOS譯文地址：CRAnimation/lottie-iOS
- Lottie-Android譯文地址：CRAnimation/lottie-Android
- Lottie-React-Native譯文地址：CRAnimation/lottie-react-native
- 翻譯：小9
- 校正：熊熊
- 術(shù)語指導：西西
- QQ群：547897182（iOS動效特工隊，入群請?zhí)峁﹤€人主頁或github賬號）
Lottie 是一個可應用于Andriod和iOS的動畫庫，它通過bodymovin插件來解析Adobe After Effects 動畫并導出為json文件，并通過手機端原生方式渲染出來。
這是前所未有的方式，設計師可以創(chuàng)作并且運行優(yōu)美的動畫而不需要工程師煞費苦心地通過手動調(diào)整的方式來重現(xiàn)動畫。有人說一張圖片可以頂?shù)纳?000個字，那么下面就算13000個字了：
所有的動畫都是通過After Effects創(chuàng)作出來，用bodymovin插件導出，不需要任何額外的工作就可以以原生的方式渲染出來。
相關(guān)的項目文件
這個項目只是用代碼對Lottie進行包裝并暴露給React Native。你可以從各自對應的庫中找到解析和渲染的代碼。
Lottie for iOS
Lottie for Android
安裝
你可以通過安裝node模塊來開始lottie：
npm i --save lottie-react-native
如果你在iOS中使用CocoaPods的話，你可以在Podfile中添加下面的代碼：
pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'
如果你在iOS中沒有用CocoaPods的話，你可以用react-native link:
react-native link lottie-ios
react-native link lottie-react-native/
針對Android系統(tǒng)，你也可以用react-native link:
react-native link lottie-react-native
如果對此有任何困惑的話，請?zhí)砑觟ssue。
基礎的用法：
查看所有組件的API
Lottie 的動畫進度可以通過改變Animated的Value來控制：
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有時候會更簡單：
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')}
/>
);
}
}
運行示例工程
你可以通過以下命令來檢出示例工程：
- 克隆倉庫:
git clone https://github.com/airbnb/lottie-react-native.git - 打開目錄：
cd lottie-react-native并且安裝:npm install - 通過
npm start啟動packager - 在另一個命令行窗口，按如下步驟操作：
針對iOS：
- 如果你沒有用CocoaPods安裝，就執(zhí)行
sudo gem install cocoapods - 安裝pods：
npm run build:pods - 運行示例代碼：
npm run run:ios
針對Android：
- 運行示例代碼：
npm run run:android
故障排查
如果你在運行pod install時出現(xiàn)：
[!] Unable to find a specification for `lottie-ios`
那么執(zhí)行pod repo update 再嘗試
替代方案
- 手動地創(chuàng)建動畫。手動創(chuàng)建動畫對于設計師以及iOS、Android工程師而言意味著付出巨額的時間。通常很難，甚至不可能證明花費這么多時間來獲得動畫是正確的。
- Facebook Keyframes。 Keyframes是專門用來構(gòu)建用戶界面的， 是FaceBook的一個很棒，很新的庫。但是Keyframes不支持一些Lottie所能支持的特性，比如： 遮罩，蒙版，裁切路徑，虛線樣式還有很多。
- Gifs。Gifs 占用的大小是bodymovin生成的JSON大小的2倍還多，并且渲染的尺寸是固定的，并不能放大來適應更大更高分辨率的屏幕。
- Png序列楨動畫。 Png序列楨動畫 甚至比gifs更糟糕，它們的文件大小通常是 bodymovin json文件大小的30-50倍，并且也不能被放大。
為什么叫Lottie？
Lottie是以德國剪影動畫先驅(qū)Lotte Reiniger（洛特·雷妮格）的名字命名的。 她最出名的作品是《阿基米德王子歷險記》 (1926) – 世界上第一部長篇動畫電影。 比華爾特·迪士尼的長篇動畫電影——《白雪公主與七個小矮人》 (1937) 還要早了10年。The art of Lotte Reineger
