如何平滑地设置twitter引导程序进度条的动画

How do you animate a twitter-bootstrap progress bar smoothly?

本文关键字：引导程序 动画 twitter 设置 何平滑 平滑      更新时间：2023-09-26

我有一个多人游戏，屏幕底部有一个30秒的计时器。如果在30秒内没有一个玩家移动，则提交表格。

var ProgressValue = 0;
function showProgress() {
    ProgressValue += 100/30;
    if (ProgressValue > 100) {
        $('form').submit();
    }
    // Ajax is done here to see if anyone has made a move.
    $('.progress .bar').css('width',ProgressValue + '%');
    setTimeout(showProgress, 1000);
}
setTimeout(showProgress, 1000);

每秒钟，我都会检查应用程序范围，看看是否有人更改了的值

Application.LastMove

我希望进度条动画流畅，但我不想通过减少超时值来实现。我认为，每秒检查是否有人采取行动已经足够服务器上的负载了。

我听说过WebSockets，但我目前的服务器在ColdFusion 8上，所以（我想）我对每秒进行一次ajax调用感到满意，除非你觉得ajax没有那么优雅，而且来自一个不太文明的时代。

Q： 如何将twitter引导程序进度条从3.3%平滑地设置为6.6%？

不要使用jQuery制作动画，更喜欢CSS动画，除非你必须支持旧的浏览器。

我从引导风格复制了这个：

.bar {
  -webkit-transition: width 30.0s ease !important;
     -moz-transition: width 30.0s ease !important;
       -o-transition: width 30.0s ease !important;
          transition: width 30.0s ease !important;
}

对于如此长的过渡，我建议您尝试不同的动画：http://www.the-art-of-web.com/css/timing-function/

在我的例子中，我添加了两个有用的东西：

  1. 按钮文本在动画开始和结束时都会更改（只是为了检查动画计时）
  2. 检查浏览器是否支持此动画：您可以使用jQuery代码作为回退模式

有关如何检测CSS动画支持的更多信息：https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support

示例：http://jsfiddle.net/CUbgr/5/

相关文章：