@1hive/lottie-react-web 中文文档教程

Question

Lottie for React, React Native, iOS, and Android

用于 React 的 Lottie 组件 具有运行时动画控制。

Introduction

Lottie 是一个用于 Web、Android 和 iOS 的库，它解析 Adobe After Effects 动画导出为 JSON 和 bodymovin 并在每个平台上本地呈现它们！

设计师第一次可以创建和发布精美的动画，而无需工程师费力地手工重新创建。

这个库是一个 react-lottie 分支，添加了运行时动画控制的功能并修复了很多错误。

Getting Started

通过使用 yarn 或 npm 安装节点模块开始使用 Lottie：

yarn add lottie-react-web

或者

npm i --save lottie-react-web

Usage

组件可以以声明的方式使用：

import React from 'react';
import Lottie from 'lottie-react-web'
import animation from './animation.json'

const App = () => (
  <Lottie
    options={{
      animationData: animation
    }}
  />
)

export default App

默认情况下它会自动循环播放动画。

Lottie 的动画控制可以通过道具来设置。 这是一个对点击做出反应的切换动画的例子：

import React, { Component } from 'react';
import Lottie from 'lottie-react-web'
import toggleAnimation from './toggleAnimation.json'

export default class App extends Component {
  this.state = { isToggled: false }

  render() (
    <div
      onClick={() => {
        this.setState(state => { isToggled: !state.isToggled})
      }}
    >
      <Lottie
        direction={this.state.isToggled ? 1 : -1}
        options={{
          animationData: toggleAnimation,
          loop: false,
        }}
      />
    </div>
  )
)

export default App

API

这些都是可用的道具：

Props

Prop	Description	Default
options	Mandatory - The object representing the animation settings that will be instantiated by bodymovin. Defines the source of animation (animationData), loop, autoplay, a few others. See details in the section below.	{ autoplay: true, loop: true }
animationControl	This is where you can change the animation at runtime. A key value pair of a After Effects property path and the a custom value to apply to it. See details below.	—
width	Sets the width of the animation container.	100%
height	Sets the heigth of the animation container.	100%
isStopped	A boolean flag indicating whether or not the animation is stopped.	false
isPaused	A boolean flag indicating whether or not the animation is paused.	false
speed	An integer indicating the speed of the animation ( 1 is 100%.)	1
segments	An array of two integers indicating the beginning and ending frame of the animation	Defaults to play entire animation
forceSegments	A boolean indicating wether the segments should play immediately or sequentially	false
direction	An integer indicating wether the animation progresses in the usual (1) or reverse (-1) direction	1
ariaRole	A string indicating the animation container ariaRole property	"button"
ariaLabel	A string indicating the animation container ariaLabel property	"animation"
title	A string indicating the animation container title property	""

Options object

定义将由 bodymovin 实例化的动画设置。 目前支持 bodymovin 选项的一个子集。

必须指定 animationData 或路径。

Prop	Description	Default
animationData	Mandatory - The source of the animation.	—
path	Mandatory - The path to the animation.	—
assetsPath	Mandatory - The root path for external assets.	images
loop	Play animation non-stop in a loop.	true
autoplay	Automatically play animation when it is instantiated.	true
renderer	The method for rendering the animation.	svg
rendererSettings	Customize bodymovin aspect ratio configurations.	—

Changing animation at runtime

您可以针对特定的 After Effects 图层属性并将其更改为 通过在 属性上设置一个 property 对象来运行时。 示例：

import React from 'react';
import Lottie from 'lottie-react-web'
import animation from './animation.json'

const Animation = ({ x, y }) => (
  <Lottie
    options={{
      animationData: animation,
    }}
    animationControl={{
      'Square,Transform,Position': [x, y],
    }}
  />
)

export default Animation

这将在运行时覆盖 JoyStkCtrl01 层的 Position 值。

Lottie 与 Joystick 'n Sliders After Effects 插件兼容，因此您可以轻松创建令人惊叹的动画。