Динамическое изменение изображений с помощью setInterval

Question

Изначально хотелось изменить скорость GIF на основе ввода пользователя, но это не представляется возможным, так как в заголовке файла задан fps для gif. Это потребует некоторого программирования низкого уровня.

Моим следующим предложенным решением было импортировать каждый кадр отдельно и использовать 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

Кажется, работает следующее решение. Сроки изменения изображения достаточно точны, чтобы выдержать испытание глазным яблоком.

Основная проблема заключалась в том, что у меня был setInterval в методе render (). Переход к componentWillMount или componentDidMount исправил эту проблему.

Кажется, что он перерисовывает компонент, но не монтирует его. Я предполагаю, что это потому, что React может определить, что обновлен только элемент, а не весь компонент.

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

  componentWillMount() {
    this.loop = setInterval(() => {
      this.setImageIndex();
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.loop);
  }

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

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

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

export default ImageDisplay;