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

Question

我从父级组件触发了一个抽奖动画，问题是由于某种原因，整个抽奖组件层都是可单击的并启动了动画。

这是我正在使用的代码：

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

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

示例：

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

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

Answer 2

在您的clickHandler中进行以下更改：

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

希望有帮助。