Randomly rotate image from its last position with CSS3_问答_开发者

Randomly rotate image from its last position with CSS3

开发者 https://www.devze.com 2023-03-31 22:21 出处：网络

I\'d like to have a \"Wheel of Fortune\" effect. When user clicks the image, it rotates random degrees (between 180-540 degrees) from its last position. Rotation should be done with CSS3. Here\'s my c

I'd like to have a "Wheel of Fortune" effect. When user clicks the image, it rotates random degrees (between 180-540 degrees) from its last position. Rotation should be done with CSS3. Here's my code so far:

<!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 $el开发者_StackOverflow社区ement = $("#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>

Problems are:

How to randomly change the value of rotation in keyframes?

How to continue rotation from its last position?

At the moment animRes() is reseting animation so the -webkit-animation-fill-mode: forwards doesn't work but without animRes() I can't reset the animation for more spins. Writing the answer with jQuery and plain JS is highly appreciated.

You need to get into some math to achieve what you want to do, hopefully it's not too difficult to understand...

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"
    });
});

I'm using CSS Transitions instead of animations because they are more simple.

The miliseconds = ... formula makes the transition last longer if there's more degrees to be transitioned. Hopefully you can integrate all of this into the code you already wrote.

You can see a demo here: http://jsfiddle.net/XkNrf/

I wouldn't process this way.

I made a little example here

It uses -moz properties, but they all have a webkit equivalent, so it should be fine.

The idea is the following: your image is rotating in an infinite fashion BUT is paused most of the time (using -moz-animation-play-state. When the user click it, it starts running. A random number is generated between a and b. And then it rotates for X*Y+Z milliseconds (in the example a and b have a 1 and 11 value, and Y is 1000, Z is 0) then it pauses again.

This way you can customize easily the number of possible outcomes and the minimum rotation time.

And you can also store the current value with an external variable starting at 0 and that's incremented by X each time an user click.