Question

我的旋转游戏：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);
    }
}

Answer 1

您可以使用更多关键帧进行设置：

.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); }
}

fiddle

替代：您可以在计时功能中设置贝塞尔曲线：

#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);
}

bezier demo (webkit)

Answer 2

您可以创建第二个基于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兼容）。

纺车慢慢停下来？ CSS3

2 个答案: