0

我创造了不同的动画思想 Bodymovin。一旦滚动到达动画，我想触发动画。我正在尝试找出方法，但不幸的是我无法做到。

我正在使用 Gatsby JS（React 框架）。我将代码粘贴到 .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的库，但对我不起作用。动画出现了，但它已经被解雇了。

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

谢谢

4

1 回答 1

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}
  )
}
于 2019-10-11T14:04:19.520 回答