Как мне добиться эффекта вращения игрового автомата с помощью CSS3 и jQuery? - PullRequest
Новая
       6

Как мне добиться эффекта вращения игрового автомата с помощью CSS3 и jQuery?

17 голосов
/ 19 сентября 2011

Я создаю демонстрационное приложение, которое случайным образом выбирает место при нажатии кнопки.Как только кнопка нажата, я хочу, чтобы места прокручивались с помощью анимации вращения игрового автомата с использованием CSS3 и jQuery до выбора места.

Я думал об использовании -webkit-keyframes и изменении положения фона, но это не идеальная анимация, которую я хотел бы.

@-webkit-keyframes spin{  
  0% {  
        background-position: 0, 0 0;
        -webkit-transform: rotateX(0deg);
     }
  100% { 
        background-position: 0, 0 -640px;
        -webkit-transform: rotateX(360deg);
     }
}

.rotating{
    -webkit-animation: spin .5s infinite linear;
    -webkit-transition: background-position .7s;
}

Кто-нибудь может подсказать, как этого можно достичь? Здесь - это то, что я имею до сих пор.Любая помощь приветствуется.

Спасибо

Ответы [ 4 ]

26 голосов
/ 24 сентября 2011

После долгих исследований плагиата я придумала это. Надеюсь, это поможет в той или иной форме. 

const POSTERS_PER_ROW = 12;
const RING_RADIUS = 200;

function setup_posters(row) {
  var posterAngle = 360 / POSTERS_PER_ROW;
  for (var i = 0; i < POSTERS_PER_ROW; i++) {
    var poster = document.createElement('div');
    poster.className = 'poster';
    // compute and assign the transform for this poster
    var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)';
    poster.style.webkitTransform = transform;
    // setup the number to show inside the poster
    var content = poster.appendChild(document.createElement('p'));
    content.textContent = i;
    // add the poster to the row
    //row.appendChild(poster);
  }

}

function init() {
  setup_posters(document.getElementById('ring-1'));
  setup_posters(document.getElementById('ring-2'));
  setup_posters(document.getElementById('ring-3'));
}

// call init once the document is fully loaded
window.addEventListener('load', init, false);
body {
  font-family: 'Lucida Grande', Verdana, Arial;
  font-size: 12px;
}
#stage {
  margin: 150px auto;
  width: 600px;
  height: 400px;
  /*
        
        Setting the perspective of the contents of the stage
        but not the stage itself
        
        */
  -webkit-perspective: 800;
}
#rotate {
  margin: 0 auto;
  width: 600px;
  height: 400px;
  /* Ensure that we're in 3D space */
  -webkit-transform-style: preserve-3d;
  /*
        Make the whole set of rows use the x-axis spin animation
        for a duration of 7 seconds, running infinitely and linearly
        */
  /* -webkit-animation-name: x-spin;
        -webkit-animation-duration: 7s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;*/
}
.ring {
  margin: 0 auto;
  height: 110px;
  width: 600px;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
.ring >:nth-child(odd) {
  background-color: #995C7F;
}
.ring >:nth-child(even) {
  background-color: #835A99;
}
.poster {
  position: absolute;
  left: 250px;
  width: 100px;
  height: 100px;
  opacity: 0.7;
  color: rgba(0, 0, 0, 0.9);
  -webkit-border-radius: 10px;
}
.poster > p {
  font-family: 'Georgia', serif;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-top: 28px;
}
/*
      Set up each row to have a different animation duration
      and alternating y-axis rotation directions.
      */

#ring-1 {
  -webkit-animation-name: x-spin;
  -webkit-animation-duration: 2s;
}
/*
      #ring-2 {
        -webkit-animation-name: back-y-spin;
        -webkit-animation-duration: 4s;
      }

      #ring-3 {
        -webkit-animation-name: y-spin;
        -webkit-animation-duration: 3s;
      }*/

/*

      Here we define each of the three individual animations that
      we will be using to have our 3D rotation effect. The first
      animation will perform a full rotation on the x-axis, we'll
      use that on the whole set of objects. The second and third
      animations will perform a full rotation on the y-axis in
      opposite directions, alternating directions between rows.
    
      Note that you currently have to specify an intermediate step
      for rotations even when you are using individual transformation
      constructs.

      */

@-webkit-keyframes x-spin {
  0% {
    -webkit-transform: rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateX(180deg);
  }
  100% {
    -webkit-transform: rotateX(360deg);
  }
}
@-webkit-keyframes y-spin {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
  }
}
@-webkit-keyframes back-y-spin {
  0% {
    -webkit-transform: rotateY(360deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
  }
}
<h1>//BOTCHED Poster Circle</h1>
<strike>
    <p>//This is a simple example of how to use CSS transformation and animations to get interesting-looking behavior.</p>
    <p>The three rings are constructed using a simple JavaScript function that creates elements and assigns them a transform
      that describes their position in the ring. CSS animations are then used to rotate each ring, and to spin the containing
      element around too.</p>
    <p>Note that you can still select the numbers on the ring; everything remains clickable.</p>
    
    </strike>
<p>Taken from <a href="http://www.webkit.org/blog-files/3d-transforms/poster-circle.html">HERE</a> 
</p>
<div id="stage">
  <div id="rotate">
    <div id="ring-1" class="ring">
      <div class="poster" style="-webkit-transform: rotateX(0deg) translateZ(200px); ">
        <p>0</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(30deg) translateZ(200px); ">
        <p>1</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(60deg) translateZ(200px); ">
        <p>2</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(90deg) translateZ(200px); ">
        <p>3</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(120deg) translateZ(200px); ">
        <p>4</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(150deg) translateZ(200px); ">
        <p>5</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(180deg) translateZ(200px); ">
        <p>6</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(210deg) translateZ(200px); ">
        <p>7</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(240deg) translateZ(200px); ">
        <p>8</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(270deg) translateZ(200px); ">
        <p>9</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(300deg) translateZ(200px); ">
        <p>10</p>
      </div>
      <div class="poster" style="-webkit-transform: rotateX(330deg) translateZ(200px); ">
        <p>11</p>
      </div>
    </div>
  </div>
</div>

Посмотреть на JSFiddle

6 голосов
/ 24 сентября 2011

как насчет http://odhyan.com/slot/, который использует плагин http://odhyan.com/slot/.

Я не уверен, что ваш ключевой кадр с вращением создаст желаемый эффект. Дисплей игрового автомата вращается, но, поскольку он имеет большой диаметр, он больше похож на непрерывную прокрутку. Вам нужно будет исказить верхнюю и нижнюю часть изображений, чтобы они выглядели реалистично.

Если вы размыте верх и низ (прозрачная тень gif или css3 с отступом), вы можете приблизиться к желаемому эффекту. Смотрите видео реального игрового автомата

1 голос
/ 25 сентября 2011

На мой взгляд, javascript + тригонометрия - ваш лучший выбор.Проверьте эту динамическую карусель и переключите ось, я думаю, что это эффект, который вы ищете.

1 голос
/ 25 сентября 2011

Если вас не устраивают некоторые другие ответы здесь, я бы рассмотрел другой (надеюсь, более простой) подход.

  • Создайте вертикальную полосу изображений (или элементов div), с самым верхним изображением, на котором вы хотите остановиться.
  • Используйте метод jquery .animate() для перемещения их по вертикали внутри меньшего контейнера div, свойство которого overflow установлено на hidden. Эффект будет таким, что вы будете видеть только по одному, «вращаясь». Если вы сделаете это быстро, я думаю, это будет хорошо выглядеть
  • Поиграйте с анимацией, пока не получите реалистичное изображение. Если вам нужно, чтобы он выглядел круче, вы можете добавить к контейнеру несколько наложений градиента png для имитации глубины 3d.

Это не суперсовременное решение CSS3, но оно будет хорошо выглядеть. Я не смог найти пример js, но этот Flash * использует ту же идею. Там нет 3d здесь; просто вертикально движущиеся изображения. Он немного размыт, но без него все равно будет выглядеть круто. PS Я ненавижу вспышку.

...