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

本文轉載自查看原文 2017-08-25 17:37 1871 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}
      />
    );
  }
}