Как случайным образом сделать одно за другим изображения с карты с затуханием? - PullRequest
Новая
       49

Как случайным образом сделать одно за другим изображения с карты с затуханием?

3 голосов
/ 12 марта 2020

В настоящее время я создаю lo go стену для веб-сайта. Мне удалось с помощью карты отображать их случайным образом, но теперь я хотел бы иметь возможность отображать их один за другим и случайным образом (например, изображение 1, изображение 6, изображение 3, ...), а также оставлять их видимыми после того, как они

Я думаю, мне нужно установить их непрозрачность равной 0, а затем сделать их непрозрачность равной 1, но я не вижу, как это сделать случайным образом.

Спасибо за ваше помощь.

РЕДАКТИРОВАТЬ:

Вот мой код: 

import React from "react"

const logoImages = [
  {
    image: "/assets/img/companies/altiplan.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/ametis.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/amplitrain.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/ar.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/artau.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/assaabloy.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/bag.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/bea.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/besix.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/bombardier.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/bouygues.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/ca.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/cartel.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/citymall.png",
    src: "Michelin",
  },
  {
    image: "/assets/img/companies/coyote.png",
    src: "Michelin",
  },
];

function shuffleMap(array) {
  let currentIndex = array.length, temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array
  /*array.sort(() => Math.random() - 0.5)
  return array*/
}

const Image = ({image, src}) => {
  return (
    <div className='box'>
      <div className='content'>
        <img src={image} alt={src}/>
      </div>

      {/*language=CSS*/}
      <style jsx>{`
        .box {
            min-width: 150px;
            height: 200px;
            overflow: hidden;
            display: flex;
            align-items: center;
            background: #000;
        }

        img {
            width: 120px;
            filter: grayscale(1) invert(100%);
        }
      `}</style>
    </div>
  )
}

const allImages = shuffleMap(logoImages.map((companies, index) => {
  return <Image key={companies.src+index} {...companies}/>
}));

const LogoWall = () => {
  return (
    <div className='container'>
      {
        allImages
      }
      {/*language=CSS*/}
      <style>{`
        .container {
            width: 100vw;
            height: auto;
            display: flex;
            justify-content: space-evenly;
            align-content: space-around;
            flex-flow: row wrap;
        }
      `}</style>
    </div>
  )
};
export default LogoWall

1 Ответ

1 голос
/ 12 марта 2020

Почему вы не выполняете интервал после отображения ваших изображений

  1. Все ваши изображения черные из-за непрозрачности 0 и случайным образом сложены
  2. Показывает первое изображение сразу из-за 0 * 1000 = 0 секунд
  3. Следующие изображения будут появляться одно за другим с интервалом в 1 секунду

Код: 

logoImages.forEach((x, i) => {
  setTimeout(() => {
    x.style.opacity = 1
  }, i * 1000)
})
...