Question

我用Bodymovin创作了不同的动画。一旦滚动到达动画，我想触发动画。我正在尝试找出方法，但是很遗憾，我无法做到这一点。

我正在使用Gatsby JS（反应框架）。我将代码粘贴到.js文件的此处：

import React, { Component } from 'react'
import Lottie from 'react-lottie'
import animationData from './paginaweb.json'

class UncontrolledLottie extends Component {


  render(){

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

    return(
      <div>
        <Lottie options={defaultOptions}
              width={200}
        />
      </div>
    )
  }
}

export default UncontrolledLottie

我以https://www.npmjs.com/package/react-animate-on-scroll的身份尝试了库，但对我没有用。动画出现了，但是已经被触发。

有人可以帮助我解决这个问题吗？我会很感激。

谢谢

Answer 1

我用react-waypont做过类似的事情。您可以在页面中的某处放置一个航点。如果滚动到达，则可以触发某些操作。确保在触发该事件时才渲染动画，以便它在到达动画时才开始。像这样的东西。

import {Waypoint} from 'react-waypoint';
import React, {useState} from 'react';

const Component = () => {
let [renderLottie, set] = useState(false);

return (
   ...
    components to push waypoint out of the first page, so you can scroll to it
   ...
    <Waypoint
      onEnter={set(true)}
    />
    {renderLottie && UncontrolledLottie}
  )
}

React + Lottie动画卷轴射击

1 个答案: