Поворачивать изображение случайным образом с последней позиции с помощью CSS3 - PullRequest
Новая
       20

Поворачивать изображение случайным образом с последней позиции с помощью CSS3

0 голосов
/ 30 августа 2011

Я бы хотел получить эффект "Колесо фортуны". Когда пользователь щелкает изображение, оно поворачивает случайные градусы (между 180-540 градусами) от своей последней позиции. Вращение должно быть сделано с CSS3. Вот мой код: 

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#pic {
    position: absolute;
    top: 200px;
    left: 200px;
}
@-webkit-keyframes spin
{
100% {-webkit-transform: rotateZ(300deg);}
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function animRes() {
  var $element = $("#pic").bind("webkitAnimationEnd", function(){
    this.style.webkitAnimationName = "";
  });
}
function doSpin() {
  animRes();
  $("#pic").css('-webkit-animation', 'spin 1s ease-out');
  $("#pic").css('-webkit-animation-fill-mode', 'forwards'); //doesn't work when using AnimRes()
}
</script>
</head>
<body>
<img id="pic" src="picture.jpg" alt="pic" onclick="doSpin();"/>
</body>
</html>

Проблемы:
Как случайным образом изменить значение поворота в ключевых кадрах?
Как продолжить вращение с последней позиции?

В данный момент animRes () сбрасывает анимацию, поэтому -webkit-animation-fill-mode: forwards не работает, но без animRes () я не могу сбросить анимацию для большего количества вращений. Написание ответа с помощью jQuery и простого JS высоко ценится.

Ответы [ 2 ]

3 голосов
/ 30 августа 2011

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

var degrees=0, seconds=0, previousRotation=0;

$("#spinner").click(function(){
 previousRotation = degrees;
 degrees+= parseInt(Math.random() * 360 + 180);
  //you should adjust this formula
   miliseconds = parseInt((degrees - previousRotation)) * 5;
    $(this).css({
        "-webkit-transform" : "rotate("+ degrees +"deg)",
        "-webkit-transition-duration" : miliseconds + "ms"
    });
});

Я использую переходы CSS вместо анимаций, потому что они болеепросто.

Формула милисекунды = ... делает переход более продолжительным, если нужно перенести больше градусов.Надеюсь, вы сможете интегрировать все это в код, который вы уже написали.

Вы можете увидеть демо здесь: http://jsfiddle.net/XkNrf/

0 голосов
/ 30 августа 2011

Я бы не стал так обрабатывать.

Я сделал небольшой пример здесь

Он использует свойства -moz, но все они имеют эквивалент webkit, так что все должно быть в порядке.

Идея заключается в следующем: ваше изображение вращается бесконечно, НО приостанавливается большую часть времени ( с использованием -moz-animation-play-state. Когда пользователь щелкает по нему, он запускается. Случайное число генерируется между a и b. И затем он вращается в течение X * Y + Z миллисекунд (в примере a и b имеют значение 1 и 11, а Y равно 1000, Z равно 0), затем он снова останавливается.

Таким образом, вы можете легко настроить количество возможных результатов и минимальное время ротации.

И вы также можете сохранить текущее значение с внешней переменной, начинающейся с 0, которая увеличивается на X каждый раз, когда пользователь щелкает.

...