Question

In最初想根据用户的输入来更改gif的速度，但这似乎不可行，因为gif的fps是在文件标题中设置的。这将需要一些底层编程。

我接下来提出的解决方案是分别导入每个框架，并使用setInterval动态翻转框架。该解决方案的问题在于该组件将不会以基于时间的方式进行安装。一些框架将花费更少或更多的时间来加载。

愿意听听其他建议。

import React, { Component } from 'react';
import frame0 from '../../assets/splitImages/frame_00_delay-0.08s.jpg';
import frame1 from '../../assets/splitImages/frame_01_delay-0.08s.jpg';
import frame2 from '../../assets/splitImages/frame_02_delay-0.08s.jpg';
import frame3 from '../../assets/splitImages/frame_03_delay-0.08s.jpg';
import frame4 from '../../assets/splitImages/frame_04_delay-0.08s.jpg';
import frame5 from '../../assets/splitImages/frame_05_delay-0.08s.jpg';
import frame6 from '../../assets/splitImages/frame_06_delay-0.08s.jpg';
import frame7 from '../../assets/splitImages/frame_07_delay-0.08s.jpg';
import frame8 from '../../assets/splitImages/frame_08_delay-0.08s.jpg';
import frame9 from '../../assets/splitImages/frame_09_delay-0.08s.jpg';
import frame10 from '../../assets/splitImages/frame_10_delay-0.08s.jpg';
import frame11 from '../../assets/splitImages/frame_11_delay-0.08s.jpg';
import frame12 from '../../assets/splitImages/frame_12_delay-0.08s.jpg';
import frame13 from '../../assets/splitImages/frame_13_delay-0.08s.jpg';
import frame14 from '../../assets/splitImages/frame_14_delay-0.08s.jpg';
import frame15 from '../../assets/splitImages/frame_15_delay-0.08s.jpg';
import frame16 from '../../assets/splitImages/frame_16_delay-0.08s.jpg';
import frame17 from '../../assets/splitImages/frame_17_delay-0.08s.jpg';
import frame18 from '../../assets/splitImages/frame_18_delay-0.08s.jpg';
import frame19 from '../../assets/splitImages/frame_19_delay-0.08s.jpg';

class ImageDisplay extends Component {
  state = {
    imageIndex: 0,
  }

  setImageIndex = () => {
    let { imageIndex } = this.state;
    if (imageIndex === 19) {
      imageIndex = 0;
    } else {
      imageIndex += 1;
    }
    this.setState({ imageIndex });
  }

  render() {
    const imageList = [
      frame0,
      frame1,
      frame2,
      frame3,
      frame4,
      frame5,
      frame6,
      frame7,
      frame8,
      frame9,
      frame10,
      frame11,
      frame12,
      frame13,
      frame14,
      frame15,
      frame16,
      frame17,
      frame18,
      frame19,
    ];
    const { imageIndex } = this.state;

    setInterval(() => {
      this.setImageIndex();
    }, 2000);
    console.log('imageIndex ', imageIndex);

    return (
      <div className="App">
        <img src={imageList[imageIndex]} />
      </div>
    );
  }
}

export default ImageDisplay;

Answer 1

以下解决方案似乎有效。图像更改的时间足够准确，可以通过我的眼球测试。

主要问题是我在render（）方法中设置了setInterval。移至componentWillMount或componentDidMount可以解决此问题。

似乎重新渲染了该组件，但没有重新安装它。我认为这是因为React能够确定仅元素被更新，而不是整个组件。

dirtyFields

使用setInterval动态更改图像

1 个答案: