React Native 插件系列之lottie-react-native

1、背景

　　首先，什么是lottie？

　　Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative，利用json文件的方式快速实现动画效果的库。

　　其次，为什么需要lottie？

　　因为我的APP想要酷炫一点呀，其实就想加一个首页动画，不至于太朴素和单调。

2、安装

　ios安装方式：

npm i --save lottie-react-native

react-native link lottie-ios

react-native link lottie-react-native

3、代码示例

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}
      />
    );
  }
}