Skip to main content

react-lottie

安装​

npm github

使用方法​

函数式（ json ）​

  • 动画不受控
import React, { Component, useState } from 'react';
import Lottie from 'react-lottie';
import animationData from './assets/82611-done.json'; 

//函数式：不可控
function App() {
  //初始化动画
  const defaultOptions = {
    loop: true, //一个布尔值或数字，用于确定动画是否会重复或应该重复多少次
    autoplay: true, //一个布尔值，确定它是否会在准备好后立即开始播放
    animationData: animationData, //一个带有导出动画数据的对象，在我们的例子中是 JSON 文件
    rendererSettings: { //渲染器的配置数据
      preserveAspectRatio: 'xMidYMid slice',
    },
  }
  return (
    <div className="App">
      <div>Lottie案例</div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}
      />
    </div>
  );
}

export default App;
  • 动画受控
import React, { Component, useState } from 'react';
import Lottie from 'react-lottie';
import animationData from './assets/82611-done.json'; 

function App() {
  const [isStopped,setIsStopped] = useState (false)
  const [isPaused,setIsPaused] = useState (false)
  const buttonStyle = {
    display: 'inline-block',
    margin: '10px auto',
    marginRight: '10px',
    border: 'none',
    color: 'white',
    backgroundColor: '#647DFF',
    borderRadius: '2px',
    fontSize: '15px',
  };
  //初始化动画
  const defaultOptions = {
    loop: true, //一个布尔值或数字，用于确定动画是否会重复或应该重复多少次
    autoplay: true, //一个布尔值，确定它是否会在准备好后立即开始播放
    animationData: animationData, //一个带有导出动画数据的对象，在我们的例子中是 JSON 文件
    rendererSettings: { //渲染器的配置数据
      preserveAspectRatio: 'xMidYMid slice',
    },
  }
  return (
    <div className="App">
      <div>Lottie案例</div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}
              isStopped={isStopped}
              isPaused={isPaused}
      />
      <button style={buttonStyle}
      onClick={()=>setIsStopped(true)}>stop</button>
      <button style={buttonStyle}
      onClick={()=>setIsPaused(false)}>play</button>
      <button style={buttonStyle}
      onClick={()=>setIsPaused(true)}>pause</button>
    </div>
  );
}

export default App;

class式（ json ）​

  • 不受控
import React, { Component, useState } from 'react';
import Lottie from 'react-lottie';
import animationData from './assets/82611-done.json';

class App extends Component {
  render() {
    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    };

    return (
      <div>
        <h1>Lottie</h1>
        <p>Base animation free from external manipulation</p>
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
        />
      </div>
    );
  }
}

export default App;
  • 受控
import React, { Component, useState } from 'react';
import Lottie from 'react-lottie';
import animationData from './assets/82611-done.json';

class App extends Component {
  state = { isStopped: false, isPaused: false };

  render() {
    const buttonStyle = {
      display: 'inline-block',
      margin: '10px auto',
      marginRight: '10px',
      border: 'none',
      color: 'white',
      backgroundColor: '#647DFF',
      borderRadius: '2px',
      fontSize: '15px',
    };

    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    };

    return (
      <div className="controlled">
        <h1>Controlled Lottie</h1>
        <p>Uses state manipulation to start, stop and pause animations</p>
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
          isStopped={this.state.isStopped}
          isPaused={this.state.isPaused}
        />
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: true })}
        >
          Stop
        </button>
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: false, isPaused: false })}
        >
          Play
        </button>
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isPaused: !this.state.isPaused })}
        >
          Pause
        </button>
      </div>
    );
  }
}

export default App;

引用地址：https://www.gingerdoc.com/tutorials/how-to-add-animations-to-react-apps-with-react-lottie

使用带图片的 Lottie 动画资源（ json+image ）​

  • 函数式
import React, { Component, useState } from 'react';
import Lottie from 'react-lottie';
import animationData from './assets/data4.json';

function App() {
  //初始化动画
  const defaultOptions = {
    loop: true, //一个布尔值或数字，用于确定动画是否会重复或应该重复多少次
    autoplay: true, //一个布尔值，确定它是否会在准备好后立即开始播放
    animationData: animationData, //一个带有导出动画数据的对象，在我们的例子中是 JSON 文件
    rendererSettings: { //渲染器的配置数据
      preserveAspectRatio: 'xMidYMid slice',
    },
  }
  return (
    <div className="App">
      <div>Lottie案例</div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}
      />
    </div>
  );
}

export default App;

其他步骤一致，注意生成images文件夹路径需要放到发布后publish根目录下

image.png

配置图片资源为线上资源，需要添加属性assetsPath

import React, { Component, useState } from 'react';
import Lottie from 'react-lottie';
import animationData from './assets/data4.json';

function App() {
  //初始化动画
  const defaultOptions = {
    loop: true, //一个布尔值或数字，用于确定动画是否会重复或应该重复多少次
    autoplay: true, //一个布尔值，确定它是否会在准备好后立即开始播放
    animationData: animationData, //一个带有导出动画数据的对象，在我们的例子中是 JSON 文件
    rendererSettings: { //渲染器的配置数据
      preserveAspectRatio: 'xMidYMid slice',
    },
    assetsPath: 'http://xxx.com' //配置图片指定路径（线上资源）
  }
  return (
    <div className="App">
      <div>Lottie案例</div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}
      />
    </div>
  );
}

export default App;

小技巧​

动效json文件通过bodymovin导出时设置进行图片压缩（base64），可以无需导出图片资源。

注意​

react-lottie控制动画播放的重置存在bug,必须设置暂停和停止属性～

链接​

使用React-Lottie将动画添加到React Apps Lottie Events 和 Lottie EventListeners 有什么区别以及如何使用？ Lottie Events 和 Lottie EventListeners 有什么区别以及如何使用？