Как сделать анимацию эффект рандома?

05 июля 2021, 21:10

Как сделать анимацию? Надо прокрутить картинки 3 раза. А затем остановить на выбранной. Создать эффект случайного выпадения картинки. Как это можно реализовать?

  var d =document.querySelector(".fortun"); 
function r() { 
    run(2) 
} 
    function run(y) { 
        var img =y*100; 
 
        d.style.transform="translate(0px, -"+img+"px)"; 
 
    }

 .con{ 
            overflow: hidden; 
        } 
        .fortun{ 
            width: 100px; 
            height: 100px; 
            transition: transform .3s ease-in-out; 
        } 
        .use{ 
            width: 100px; 
            height: 100px 
        }

<div class="con" > 
<div style="" class="fortun"> 
    <img class="use" src="http://www.pngall.com/wp-content/uploads/2016/03/Butterfly-PNG-6.png"> 
    <img class="use" src="https://img2.freepng.ru/20180228/bbw/kisspng-parrot-bird-blue-and-yellow-macaw-stock-photograph-parrot-bako-5a9659ccea79f5.9220246915198028289604.jpg"> 
    <img class="use" src="https://img2.freepng.ru/20180702/soa/kisspng-california-spangled-kitten-american-shorthair-euro-5b3aefa8c74863.7669235015305890968163.jpg"> 
</div> 
</div> 
<input type="button" value="go" onclick="r()">

Answer 1

Могу предложить вращать изображения вокруг оси x, вот что получается:

let fortun = document.querySelectorAll('.fortun'); 
let angle = 0 
function r() { 
  fortun.forEach(f => { 
      f.dataset.angle -= Math.floor(3+Math.random()*6)*120; 
      f.querySelectorAll(".use").forEach(d => { 
        d.style.setProperty('--r',  f.dataset.angle+'deg'); 
      }); 
  }) 
  setTimeout(e => { 
    if (new Set([...fortun].map(f => (+f.dataset.angle / 120)%3)).size ===1) 
      console.log('you win!') 
  }, 2000) 
}

.fortun { 
  width: 100px; 
  height: 100px; 
  perspective: 400px; 
  display:inline-block; 
  margin:30px; 
} 
 
.use { 
  transition:2s; 
  position:absolute; 
  width: 100px; 
  height: 100px; 
  backface-visibility: hidden; 
  --r: 0deg; 
  --t: 28.5px; 
} 
 
img.use:nth-child(1) { 
  transform: rotateX(calc(0deg + var(--r))) translateZ(var(--t)); 
} 
img.use:nth-child(2) { 
  transform: rotateX(calc(120deg + var(--r))) translateZ(var(--t)); 
} 
img.use:nth-child(3) { 
  transform: rotateX(calc(240deg + var(--r))) translateZ(var(--t)); 
}

<input type="button" value="go" onclick="r()"><br> 
<div style="" data-angle="120" class="fortun"> 
  <img class="use" src="https://picsum.photos/id/11/100/100"> 
  <img class="use" src="https://picsum.photos/id/22/100/100"> 
  <img class="use" src="https://picsum.photos/id/33/100/100"> 
</div> 
<div style="" data-angle="0" class="fortun"> 
  <img class="use" src="https://picsum.photos/id/11/100/100"> 
  <img class="use" src="https://picsum.photos/id/22/100/100"> 
  <img class="use" src="https://picsum.photos/id/33/100/100"> 
</div> 
<div style="" data-angle="120" class="fortun"> 
  <img class="use" src="https://picsum.photos/id/11/100/100"> 
  <img class="use" src="https://picsum.photos/id/22/100/100"> 
  <img class="use" src="https://picsum.photos/id/33/100/100"> 
</div>

Answer 2

let angle = 0 
function r() { 
  angle -= Math.floor(3+Math.random()*6)*120; 
  document.querySelectorAll(".use").forEach(d => { 
    d.style.setProperty('--r', angle+'deg'); 
  }) 
}

.fortun { 
  width: 100px; 
  height: 100px; 
  perspective: 400px; 
  position:absolute; 
  margin:30px; 
} 
 
.use { 
  transition:2s; 
  position:absolute; 
  width: 100px; 
  height: 100px; 
  backface-visibility: hidden; 
  --r: 0deg; 
  --t: 28.5px; 
} 
 
img.use:nth-child(1) { 
  transform: rotateX(calc(0deg + var(--r))) translateZ(var(--t)); 
} 
img.use:nth-child(2) { 
  transform: rotateX(calc(120deg + var(--r))) translateZ(var(--t)); 
} 
img.use:nth-child(3) { 
  transform: rotateX(calc(240deg + var(--r))) translateZ(var(--t)); 
}

<div style="" class="fortun"> 
  <img class="use" src="https://picsum.photos/id/31/100/100" data-deg=33deg> 
  <img class="use" src="https://picsum.photos/id/32/100/100"> 
  <img class="use" src="https://picsum.photos/id/33/100/100"> 
</div> 
 
<input type="button" value="go" onclick="r()">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как реализовать вывод текста из button в input?

При нажатии на кнопку должен выводиться текст из нее в inputНичего подобного не нашла, как это реализовать?

javascript

Как деструктуризовать объект в массиве?

Есть объект:

c++

Библиотеки, оптимизация и соглашения о вызове

Для примера рассмотрим винду

HTML

Отображение своего видео контроллера (custom controls) в полноэкранном режиме (in fullscreen mode)

Возник вопрос по поводу событий и свойств при работе с video элементом, а именно, при создании своего контроллера остановился на моменте с fullscreen...