使用 CSS3 从最后一个位置随机旋转图像答案

【问题标题】：Randomly rotate image from its last position with CSS3使用 CSS3 从最后一个位置随机旋转图像
【发布时间】：2011-08-31 03:28:06
【问题描述】：

我想要一个“幸运之轮”效果。当用户单击图像时，它会从最后一个位置随机旋转角度（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 编写答案。

【问题讨论】：

标签： javascript animation random css rotation

【解决方案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 过渡而不是动画，因为它们更简单。

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

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

【讨论】：

这非常适合我的需求。花了一段时间才明白，但我现在明白了：）非常感谢！

【解决方案2】：

我不会这样处理的。

我做了一个小例子here

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

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

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

您还可以使用从 0 开始的外部变量来存储当前值，每次用户点击时该变量增加 X。

【讨论】：

感谢您的帮助和快速回复！解决这个问题的好方法。但是，我想在每次新的旋转中使用计时功能，以使旋转更加逼真。它应该快速启动，然后在接近尾声时减速。
这可能很难单独使用 css。你考虑过使用画布吗？如果需要，可以尝试使用 rapahel.js。结合图像，旋转和动画，应该没问题。有关文档，请参阅 raphaeljs.com/reference.html。
我去看看。我需要 CSS3 动画，因为我也需要它在 iPad 上顺利运行。我很久以前就尝试过 Raphael.js，但我不记得 iPad 上的动画是否流畅。我会检查的。