Lottie 动画在单击包含它的图层时开始播放，如何停止？

Question

我有一个从父组件触发的 lottie 动画，问题是由于某种原因整个 lottie 组件层是可点击的并启动动画。

这是我正在使用的代码：

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

  clickHandler = () => {
    this.setState({ 
        isStopped: false,
        Animated: 0
    });
    console.log("clicked");
  };

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

这是 dom 的样子：

我找不到任何可能触发此事件的东西，如果你们有任何想法请告诉我。

Answer 1

在您的 clickHandler 中进行此更改：

clickHandler = (e) => {
    e.preventDefault()
     this.setState({ 
        isStopped: false,
        Animated: 0
     }); 
    console.log("clicked"); 
};

希望对您有所帮助。

Answer 2

有一个未记录的属性：isClickToPauseDisabled。当它设置为 false（这是默认值）时，您可以通过单击它来暂停和恢复动画。如果您不希望发生这种情况，请将此属性设置为 true。

示例：

<Lottie options={this.defaultOptions}
    ...
    isClickToPauseDisabled={true} 
/>

参考：https://github.com/chenqingspring/react-lottie/pull/54

Lottie 动画在单击包含它的图层时开始播放，如何停止？

Lottie animations starts playing when layer that contains it is clicked, how to stop this?

reactjs

lottie