React + Lottie Анимация прокрутки огня - PullRequest
Новая
       60

React + Lottie Анимация прокрутки огня

0 голосов
/ 11 октября 2019

Я создал разные анимации, подумал Бодимовин. Я хотел бы запустить анимацию, когда свиток достигнет анимации. Я пытаюсь найти способ, но, к сожалению, я не могу это сделать.

Я работаю с Gatsby JS (React framework). Я вставляю свой код сюда из файла .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, но мне это не помогло. Анимация появляется, но она уже запущена.

Кто-нибудь, кто может мне помочь с этим? Я буду очень признателен.

Спасибо

1 Ответ

0 голосов
/ 11 октября 2019

Я делал подобные вещи с реагировать-путевой. Вы можете разместить путевую точку где-нибудь на странице. Если ваш свиток дойдет до него, вы можете что-то вызвать. Убедитесь, что вы просто визуализируете анимацию, когда это событие сработало, поэтому оно просто начинается, когда вы туда доберетесь. Как то так. 

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}
  )
}
...