纺车慢慢停下来? CSS3

时间:2013-06-13 18:58:28

标签: javascript css

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

2 个答案:

答案 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); }
}

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)

答案 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兼容)。