React Native开源特效动画封装库模块(lottie-react-native)

尊重版权,转载请注明出处

本文来自:嘎嘎软件( http://www.gagakj.com ) /江清清的技术专栏(http://www.lcode.org)

开源项目地址: https://github.com/airbnb/lottie-react-native

(一).项目介绍

这两天突然发现一个非常好的开源动画特效项目，Airbnb出品，他们公司的产品一向比较精美，而且开源出来的东西非常不错。Lottile组件库本来是适用于Android和iOS平台的。大体流程为:

1.1.使用Adobe After Effects软件做出特效动画;

1.2.通过bodymovin项目工具把特效动画采用JSON格式文件进行导出;

1.3.用Lottie库进行解析JSON文件并且在移动端上面渲染效果即可。

刚创建的React Native交流十群: 157867561 ,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

这样我们在第一次设计的时候，可以设计出来很多精致的动画特效效果，然后去导出相关的动画文件即可。

(二).部分效果

首先我们来看一些精致的效果吧~

以上所有的动画效果全部通过After Effects工具设计，然后使用bodymovin导出JSON格式文件，直接原生渲染出来，没有其他任何额外的工作量哈。

(三).相关项目

这个项目是在Lottie原生模块库的基础上面进行封装给React Native使用，所有有关解析和渲染的代码都可以在以下的两个相关库中找到。

3.1.Lottie for iOS ( https://github.com/airbnb/lottie-ios )

3.2.Lottie for Android ( https://github.com/airbnb/lottie-android )

(四).安装说明

4.1.安装Lottie node模块库

npm i --save lottie-react-native

4.2.如果你在iOS中使用CocoaPods,你可以在Podfile文件中如下配置

pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'

4.3.如果你在iOS中没有使用CocoaPods,可以直接使用react-native linke;进行关联

react-native link lottie-ios
react-native link lottie-react-native/

4.4.针对android版本，你也可以如下使用react-native link

react-native link lottie-react-native

(五).实例说明

查看本库全部的组件API( 点击进入 )

以下就是Lottie库的基本使用方法，Lottie的动画进度，可以通过Animated的值进行控制，如下代码:

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

除此之外还有另外一种更加精简的调用方法:

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

(六).实例项目运行

我们可以通过以下一些步骤方法进行运行实例项目

6.1.git clone https://github.com/airbnb/lottie-react-native.git 下载项目

6.2. cd lottie-react-native 然后执行npm install 安装库依赖

6.3. 执行npm start 打开包server

6.4.然后打开另外一个终端根据，执行如下的一些命令

针对iOS版本:

1.如果你没有安装CocoaPods，可以执行sudo gem install cocoapods

2.安装pods: npm install build:pos;

3.运行实例:npm run run:ios

针对Android版本:

1.直接运行npm run run:android命令即可