1

我的旋转游戏：查看源：http ://driptone.com/jony/applications/luckyspin/

上一个问题（关于动画的解释）：CSS 纺车 5 秒后停止？

请点击“旋转”，它会旋转轮子。

我想在某个时候让轮子开始慢慢停止，慢慢地向动画添加更多的 MS，直到它变得非常慢。

是否可以在不重新设置图像的情况下制作？通过重新设置，我的意思是，如果车轮当前以 440 度旋转，则使其旋转得更慢，而不是将其重新设置为 0 度。

那可能吗？

考虑到我希望它在生成的数字出现后立即停止（AJAX 响应到达），我也将能够使用 Javascript

原始 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);
    }
}
4

2 回答 2

3

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

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

贝塞尔演示（webkit）

于 2013-06-13T20:30:27.350 回答
0

您可以创建一个key-frames基于 second 的动画来减速，例如：

@-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 兼容，但将其修改为跨浏览器兼容是直截了当的。）

另请参阅这个简短的演示（也仅与 webkit 兼容）。

于 2013-06-13T20:30:49.230 回答