在React中用createElement从头开始重放一个gif文件。

Question

我试图在我的React项目中创建一个函数，它将创建一个新的元素，播放一个循环的gif，然后删除该元素。到目前为止，我已经半成功地使用了这个功能。

function playGif() {
    var gif = document.createElement('img')
    gif.className = "gif-play"
    document.body.appendChild(gif)
    setTimeout(() => {  gif.parentNode.removeChild(gif); }, 600)
  }

使用了以下CSS

.gif-play {
  width: 256px;
  height: 256px;
  position: absolute;
  background-image: url(./assets/images/animations/atk1.gif);
  background-size: cover;
}

然而，无论我如何设置删除元素的超时时间（甚至是gif的精确持续时间，单位为毫秒），gif仍然会在点击几次按钮后从中间开始剪切和播放。

我也试过像这样直接设置图片src。

  function playGif() {
    var gif = document.createElement('img')
    gif.src = require('./assets/images/animations/atk1.gif')
    document.body.appendChild(gif)
    setTimeout(() => {  gif.parentNode.removeChild(gif); }, 600)
  }

但这样一来，gif根本就不会显示出来，只是一张破碎的图片。我想在React中使用require()应该可以解决这个问题，但是对我来说还是不行。

所以，如果有任何关于如何让我的gif在我调用函数时从头开始播放的提示，将是巨大的。

Answer 1

不知道你到底想要什么，但我已经为你准备了一个动画。你可以看看。希望它能帮助你。

播放Gif示例组件

import React, {useEffect} from "react";
import PlayGif from './PlayGif.css'

function PlayGifExample() {

    function animate(i) {
        if(i > 1000)
            return;
        let gif = document.createElement('img');
        gif.className = "gif-play";
        gif.style.cssText = `left: ${i}px`;
        console.log(i);
        document.body.appendChild(gif);
        setTimeout(() => {
            gif.parentNode.removeChild(gif);
            animate(i+1);
        }, 10)
    }

    function playGif() {
            let gif = document.createElement('img');
            gif.className = "gif-play";
            gif.style.cssText = `left: 1px`;
            document.body.appendChild(gif);
            setTimeout(() => {
                gif.parentNode.removeChild(gif);
                animate(2);
            }, 10)
    }

    return (
        <>
            <button onClick={playGif}>Click me</button>
        </>
    );
}

export default PlayGifExample;

PlayGif.css

.gif-play {
    width: 256px;
    height: 256px;
    position: absolute;
    background-image: url(./images/4.png);
    background-size: cover;
}