reactjs - React JS 在悬停时为 Lottiefile 设置动画

Question

我想利用在我正在创建的 ReactJS 应用程序中的某些按钮上使用微交互的优势。

我正在尝试做的事情：

当我将鼠标悬停在 div 中的图标上时，我希望播放动画。这是图标的 Lottie。

编辑图标.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 有关。

标签： reactjslottie

Answer 1

您可以获得对 Lottie 组件的引用并使用它的方法play和pause.

免责声明我从未使用过 react-lottie，但我使用了 lottie-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>;
    }
}