Воспроизведение GIF с самого начала с помощью createElement в React

Question

Я пытаюсь создать функцию в своем проекте React, которая создаст новый элемент, который воспроизводит один l oop 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 по-прежнему будет отсекать и играть с середины после нескольких нажатий кнопок.

Я также попытался установить изображение sr c прямо так:

  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 никогда не появляется вообще, только испорченное изображение. Я думал, что использование require () в React должно было исправить это, но у меня все равно это не работает.

Так что любые советы о том, как заставить мой gif играть с самого начала, когда я вызываю функцию, быть великим Спасибо!

Answer 1

Не уверен, что именно вы хотите, но я подготовил одну анимацию для вас. Вы можете проверить это. Надеюсь, это поможет вам.

Компонент PlayGifExample

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;
}