Реагируйте JS, оживляя Lottiefile на Hover - PullRequest
Новая
       12

Реагируйте JS, оживляя Lottiefile на Hover

0 голосов
/ 13 марта 2020

Я хочу воспользоваться преимуществами использования микро-взаимодействий на некоторых кнопках в приложении ReactJS, которое я создаю.

Что я пытаюсь сделать:

Когда я наведите / mouseEnter на иконку в div, я хочу, чтобы анимация воспроизводилась. Это Lott ie для иконки.

EditIcon.jsx 

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


export default class EditIcon extends Component {
constructor(props) {
    super(props);
    this.state = {
      isStopped: true,
      isPaused: true,
      Animated: 0,
    };
    this.defaultOptions = {
      loop: false,
      autoplay: false,
      animationData: animationData
    };
  }

  onMouseEnter = () => {
    this.setState({ 
        isPaused: false,
        autoplay: true,
        Animated: 0
    });
    console.log("animate");
  };

  onMouseLeave = () => {
    this.setState({ 
        isPaused: true,
        autoplay: false,
        Animated: 0
    });
    console.log("stop");
  };


  render() {
    return (
      <div id="ethdrop">
        <Lottie
          className='animation-class'
          options={this.defaultOptions}
          isStopped={this.state.isStopped}
          isPaused={this.state.isPaused}
          onMouseEnter={this.onMouseEnter} 
          onMouseLeave={this.mouseLeave}
        />
    </div>
    );
  }
}

Еще одна странность, которую я обнаружил в Stack Blitz, связана с функцией onMouseEnter, она не работает при наведении предназначены. Однако, если я нажму на значок, который он анимирует.

https://stackblitz.com/edit/react-zwlm7m

Я искал решение этой проблемы, но не нашел ничего на S / O, большинство решений относятся к Jquery.

1 Ответ

0 голосов
/ 13 марта 2020

Вы можете получить ссылку на компонент Lott ie и использовать его метод play и pause.

Отказ от ответственности. Я никогда не использовал response-lott ie, но я используйте lott ie -react-native, который кажется довольно похожим, и я запускаю воспроизведение / паузу анимации. 

export default class EditIcon extends Component {
    _lottieHeartRef;

    ...

    onRefLottie = (ref) => {
        this._lottieHeartRef = ref;
    }

    onMouseEnter = () => {
        this._lottieHeartRef && this._lottieHeartRef.play();
        console.log("animate");
    };

    onMouseLeave = () => {
        this._lottieHeartRef && this._lottieHeartRef.pause();
        console.log("stop");
    };


    render() {
        return <div id="ethdrop">
            <Lottie
                ref={this.onRefLottie}
                ...
                onMouseEnter={this.onMouseEnter} 
                onMouseLeave={this.onMouseLeave} />
        </div>;
    }
}
...