我的旋转游戏:view-source:http://driptone.com/jony/applications/luckyspin/
上一个问题(解释动画):CSS spinning wheel stop after 5 seconds?
请点击“旋转”,它会旋转滚轮。
我想在某些时候这样做,通过在动画中慢慢添加更多的MS,轮子将开始慢慢停止,直到它变得非常慢。
可以在不重新设置图像的情况下制作吗? 通过重新设置我的意思是,如果车轮当前正在以440度旋转,则使其旋转得更慢,而不将其重置为0度。
这可能吗?
我也可以使用Javascript,考虑到我希望它在生成的数字出现后慢慢停止(AJAX响应到达)
原始JAVASCRIPT代码:
function spinWheel() {
$(".wheel").html("<div class='wheel_spin_on'></div>");
}
function stopWheel() {
$(".wheel").html("<div class='wheel_spin' onClick='loadLuck();'></div>");
}
var timeoutID = '';
function loadLuck() {
clearTimeout(timeoutID);
spinWheel();
$("#luck").html('Spinning......');
timeoutID = setTimeout(function() {
$.post('ajax.php', {getLuck : '1'}, function(data) {
$("#luck").html(data);
stopWheel();
});
}, 3000);
}
CSS代码:
.wheel_spin {
background-image: url("../img/spin2.png");
background-repeat: no-repeat;
width: 262px;
height: 261px;
margin-left: 1%;
}
.wheel_spin_finished {
background-image: url("../img/spin.png");
background-repeat: no-repeat;
width: 262px;
height: 261px;
margin-left: 1%;
}
.wheel_spin_on {
background-image: url("../img/spin.png");
background-repeat: no-repeat;
width: 262px;
height: 261px;
margin-left: 1%;
-webkit-animation-name: spin;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 500ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 500ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
答案 0 :(得分:2)
您可以使用更多关键帧进行设置:
.rotate {
width: 100px;
height: 100px;
background-color: green;
-webkit-animation: spin 5s linear;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(360deg); }
20% { -webkit-transform: rotate(720deg); }
40% { -webkit-transform: rotate(1080deg); }
70% { -webkit-transform: rotate(1440deg); }
100% { -webkit-transform: rotate(1800deg); }
}
替代: 您可以在计时功能中设置贝塞尔曲线:
#dash {
width: 200px;
height: 200px;
left: 35px;
top: 35px;
position: absolute;
background-color: lightblue;
-webkit-transition: all 10s cubic-bezier(0.25, 0.1, 0.25, 1)
-webkit-transform: rotateZ(0deg);
}
#dash:hover {
-webkit-transform: rotateZ(3600deg);
}
答案 1 :(得分:0)
您可以创建第二个基于key-frames
的动画来减慢速度,例如:像这样:
@-webkit-keyframes slowdown {
0% { -webkit-transform: rotate(0deg); }
13% { -webkit-transform: rotate(630deg); }
25% { -webkit-transform: rotate(1080deg); }
38% { -webkit-transform: rotate(1530deg); }
50% { -webkit-transform: rotate(1890deg); }
63% { -webkit-transform: rotate(2160deg); }
75% { -webkit-transform: rotate(2340deg); }
88% { -webkit-transform: rotate(2430deg); }
100% { -webkit-transform: rotate(2466deg); }
}
然后,在stopWheel()
函数中,您可以设置适当的类以开始减速并安排动画停止(通过另一个类更改),例如:
function stopWheel() {
/* Start the slowing down */
$(".wheel").html("<div class='wheel_spin_stopping'></div>");
/* Schedult to stop in 6 seconds
(should be the same as the animation duration) */
setTimeout(function() {
$(".wheel").html("<div class='wheel_spin' onClick='loadLuck();'></div>");
}, 6000);
}
最后,您需要stopping
类的CSS样式定义:
.wheel_spin_stopping {
...
-webkit-animation-name: slowdown;
-webkit-animation-duration: 6000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
(注意,示例代码只与webkit兼容,但将其修改为跨浏览器兼容是直截了当的。)
另请参阅此 short demo (仅限webkit兼容)。