如何優雅的展示動態圖標lottie-react-native

如何優雅的展示動態圖標lottie-react-native

項目中，需要使用到動態圖標，發現又好用的庫，在這裏分享一下，需要使用的工具庫爲lottie-react-native，通過導出AE軟件中的動畫特效，以json文件的方式導出，來實現動畫的效果。

一、Lottie是什麼？

Lottie是Airbnb開源的一個支持 Android、iOS 以及 ReactNative，利用Json文件的方式快速實現動畫效果的庫。簡單點說就是Json文件記錄動畫路徑，Android、iOS 以及 ReactNative解析展現出來。

二、Lottie能實現什麼效果？

三、集成過程

1.安裝拉取第三方包：

yarn add lottie-react-native
yarn add [email protected]

or

npm i --save lottie-react-native
npm i --save [email protected]

如果是ios平臺，請繼續執行下面命令（react-native 版本大於0.60或更高的不需要手動react-native link,而是通過pod install安裝依賴）：

cd ios && pod install

至此，就完成了第三方包的引入工作。
⚠️：Android平臺不需要特殊處理，除非報錯崩潰了，請檢查以下位置：
a.路徑android/app/src/main/java/<AppName>/MainApplication.java

在頂部導入,添加

import com.airbnb.android.react.lottie.LottiePackage;

在 List getPackages();中,添加

packages.add(new LottiePackage()); 

b.路徑android/app/build.gradle,dependencies依賴塊添加

implementation project(':lottie-react-native') 

c.路徑android/settings.gradle添加

include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')

2.獲取json文件

這個使用的json文件，是由Adobe After Effects這個軟件生成，然後通過其插件bodymovin 生成，同時這裏有安裝教程,具體導出過程煩請請教UI設計，他們可能會更熟悉。如果實在找不到了，就使用這裏的json文件->文件地址

3.組件庫的使用

假設我們已經獲取到這個animation.json文件了，如下所示最基礎的使用方法：

import React from 'react';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  render() {
    return <LottieView source={require('./animation.json')} autoPlay loop />;
  }
}

當然，還有其他接口提供使用

import React from 'react';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  componentDidMount() {
    // 手動控制播放
    this.animation.play();
    // 設置特定的開始時間和結束時間
    this.animation.play(30, 120);
  }

  render() {
    return (
      <LottieView
        ref={animation => {
          this.animation = animation;
        }}
        source={require('../path/to/animation.json')}
      />
    );
  }
}

結合react-native組件Animated實現控制動畫播放的過程

import React from 'react';
import { Animated, Easing } from 'react-native';
import LottieView 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,
      easing: Easing.linear,
    }).start();
  }

  render() {
    return (
      <LottieView source={require('../path/to/animation.json')} progress={this.state.progress} />
    );
  }
}

還能夠指定的更改圖層的顏色

import React from 'react';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  render() {
    return (
      <LottieView
        source={require('../path/to/animation.json')}
        colorFilters={[{
          keypath: "button",
          color: "#F00000"
        },{
          keypath: "Sending Loader",
          color: "#F00000"
        }]}
        autoPlay
        loop
      />
    );
  }
}

Component API:

Prop	Description	Default
source	Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json')	None
progress	A number between 0 and 1, or an Animated number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API.	0
speed	The speed the animation will progress. Sending a negative value will reverse the animation	1
duration	The duration of the animation in ms. Takes precedence over speed when set. This only works when source is an actual JS object of an animation.	undefined
loop	A boolean flag indicating whether or not the animation should loop.	true
autoPlay	A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API.	false
autoSize	A boolean flag indicating whether or not the animation should size itself automatically according to the width in the animation’s JSON. This only works when source is an actual JS object of an animation.	false
style	Style attributes for the view, as expected in a standard View, aside from border styling	None
imageAssetsFolder	Needed for Android to work properly with assets, iOS will ignore it.	None
onAnimationFinish	A callback function which will be called when animation is finished. Note that this callback will be called only when loop is set to false.	None

Methods (Imperative API):

Method	Description
play	Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation when called as play(startFrame, endFrame).
reset	Reset the animation back to 0 progress.

更多的接口可以參見：接口參見

四、集成效果圖

五、可能遇到的問題

1.Undefined symbol: protocol xxx

解決方案：
1.在Xcode中打開ios / YourAppName.xcodeproj
2.在左側的項目瀏覽器中，右鍵單擊您的應用程序名稱，然後單擊新建文件…。 爲項目創建一個空的Swift文件（添加時請確保選擇了target是“您的應用名稱”）
3.當Xcode詢問時，按Create Bridging Header，然後不要刪除Swift文件。重新運行您的構建。
參考地址：
1.https://github.com/mxcl/PromiseKit/issues/1059
2.https://stackoverflow.com/questions/57903395/about-100-error-in-xcode-undefined-symbols-for-architecture-x86-64-upgraded-re

---