Question

我希望有一个“财富之轮”的效果。当用户单击图像时，它会从其最后位置旋转随机度（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编写答案非常感谢。

Answer 1

你需要进行一些数学计算才能达到你想要的目标，希望它不会太难理解......

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 Transitions而不是动画，因为它们更简单。

如果要转换的度数更多，则miliseconds = ...公式会使转换的持续时间更长。希望您可以将所有这些集成到您已编写的代码中。

您可以在此处查看演示：http://jsfiddle.net/XkNrf/

Answer 2

我不会这样处理。

我做了一个例子here

它使用-moz属性，但它们都有一个webkit等价物，所以应该没问题。

这个想法如下：你的图像以无限的方式旋转但是大部分时间暂停（using -moz-animation-play-state。当用户点击它时，它开始运行。在a和b之间产生一个随机数然后它旋转X * Y + Z毫秒（在示例中a和b的值为1和11，Y为1000，Z为0）然后再次暂停。

通过这种方式，您可以轻松自定义可能的结果数量和最短的旋转时间。

您还可以使用从0开始的外部变量存储当前值，并且每次用户单击时都会增加X.

使用CSS3从最后位置随机旋转图像

2 个答案: