使用CSS3从图像的上一个位置随机旋转图像
使用CSS3从图像的上一个位置随机旋转图像
提问于 2011-08-30 18:51:19
我希望有一个“幸运之轮”的效果。当用户单击图像时，它会从最后一个位置随机旋转(在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
Stack Overflow用户
回答已采纳
发布于 2011-08-31 03:28:06
你需要进入一些数学来实现你想做的事情，希望它不会太难理解……
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/
Stack Overflow用户
发布于 2011-08-30 19:30:36
我不会这样处理的。
我做了一个小例子here
它使用-moz属性，但它们都有一个webkit等效项，所以应该没问题。
这个想法是这样的:你的图像以无限的方式旋转，但大部分时间是暂停的(using -moz-animation-play-state。当用户单击它时，它将开始运行。在a和b之间生成一个随机数。然后它旋转X*Y+Z毫秒(在示例中，a和b的值分别为1和11，Y为1000，Z为0)，然后再次暂停。
通过这种方式，您可以轻松地自定义可能结果的数量和最小轮换时间。
你也可以用一个外部变量来存储当前值，这个外部变量从0开始，每次用户点击时，这个外部变量就会递增X。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7242046
复制相关文章
相似问题
腾讯云开发者
