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

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

javascript animation random css

Javascript 使用CSS3从最后一个位置随机旋转图像,javascript,animation,random,css,rotation,Javascript,Animation,Random,Css,Rotation,我想要一个“命运之轮”效果。当用户单击图像时，它会从最后一个位置随机旋转180-540度。应使用CSS3进行旋转。以下是我目前的代码： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #pic { position: absolute; top: 200px; left: 200px; } @-webkit-k

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


#图片{
位置：绝对位置；
顶部：200px；
左：200px；
}
@-webkit关键帧旋转
{
100%{-webkit变换：旋转（300度）；}
}
函数animers（）{
var$element=$（“#pic”）.bind（“webkitAnimationEnd”，function（））{
this.style.webkitAnimationName=“”；
});
}
函数doSpin（）{
动物（）；
$（“#pic”）.css（“-webkit动画”，“旋转1放松”）；
$（“#pic”）.css（'-webkit animation fill mode'，'forwards'）；//在使用AnimRes（）时不起作用
}

问题是：
如何随机更改关键帧中旋转的值？
如何从上一个位置继续旋转

此时animRes（）正在重置动画，因此

-webkit动画填充模式：forwards

不起作用，但如果没有animRes（），我无法重置动画以进行更多旋转。非常感谢使用jQuery和纯JS编写答案。

我不会这样处理

我举了一个小例子

它使用-moz属性，但是它们都有一个webkit等价物，所以应该可以

其原理如下：图像以无限方式旋转，但大部分时间都处于暂停状态（当用户单击它时，它开始运行。在A和b之间生成一个随机数。然后它旋转X*Y+Z毫秒（在示例中，A和b的值为1和11，Y为1000，Z为0），然后再次暂停

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

您还可以使用一个外部变量存储当前值，该变量从0开始，每次用户单击时递增X。

我不会这样处理

我举了一个小例子

它使用-moz属性，但是它们都有一个webkit等价物，所以应该可以

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

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

您需要学习一些数学知识来实现您想要做的事情，希望不太难理解

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

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

你可以在这里看到一个演示：

你需要学习一些数学知识来实现你想做的事情，希望它不会太难理解

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

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

您可以在此处看到一个演示：

感谢您的帮助和快速回复！这是解决此问题的好方法。但是，我希望在每次新旋转时使用计时功能，以使旋转更逼真。它应该具有快速开始，然后在接近结束时减慢速度。仅使用css可能很难做到这一点。您是否考虑过使用canvas？如果y如果你愿意，你可以尝试使用rapahel.js。通过图像、旋转和动画的组合，应该可以。请参阅文档。我会看一看。我需要CSS3动画，因为我需要它在iPad上顺利运行。我很久以前就试用过Raphael.js，但我记不起iPad上的动画是否流畅。我很高兴I’我会检查一下。谢谢你的帮助和快速回复！这是解决这个问题的好方法。但是，我想在每一个新的旋转上使用计时功能，使旋转更逼真。它应该有快速开始，然后在接近结束时减速。这可能很难单独使用css。你考虑过使用canvas吗？如果你想，你不能我需要使用rapahel.js。结合图像、旋转和动画，应该可以。请参阅文档。我会看一看。我需要CSS3动画，因为我需要它在iPad上顺利运行。我很久以前就试用过Raphael.js，但我记不起iPad上的动画是否流畅。我会检查一下。这个非常适合我的需要。花了一段时间才理解，但我现在理解了：）非常感谢！这非常适合我的需要。花了一段时间才理解，但我现在理解了：）非常感谢！