11

画面の下部に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

プログレスバーをスムーズにアニメーション化したいのですが、タイムアウト値を減らしてアニメーション化したくありません。誰かが毎秒動きをしているのかどうかをチェックすることは、すでにサーバーに十分な負荷をかけていると思います。

WebSocketについて聞いたことがありますが、現在のサーバーはColdFusion 8上にあるので、ajaxがそれほどエレガントではなく、文明化されていない時代からのものであると感じない限り、（私は）毎秒ajax呼び出しを行うことに満足しています。

Q：Twitterブートストラップのプログレスバーを3.3％から6.6％にスムーズにアニメーション化するにはどうすればよいですか？

4

1 に答える 1

14

古いブラウザをサポートする必要がない限り、jQueryを使用してアニメーション化するのではなく、CSSアニメーションを優先してください。

Bootstrapスタイルからこのコピーを作成しました：

.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/

私の例では、役立つ可能性のある2つのものを追加しました。

  1. ボタンのテキストは、アニメーションの開始時と終了時に変化します（アニメーションのタイミングを確認するためだけに）
  2. ブラウザがこのアニメーションをサポートしているかどうかを確認します。jQueryコードをフォールバックモードとして使用できます

CSSアニメーションサポートを検出する方法の詳細については、https ：//developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_supportをご覧ください。

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

于 2012-09-08T17:27:16.597 に答える