Каким образом вы легко аниматируете индикатор прогресса в twitter-bootstrap?

У меня многопользовательская игра с 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 не так элегантен и менее цивилизован, возраст.

В: Каким образом вы легко оживляете индикатор прогресса в twitter-bootstrap с 3,3% до 6,6%?

Ответы

Ответ 1

Не анимация с помощью 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/

В моем примере я добавил две вещи, которые могут быть полезны:

  • Текст кнопки изменяется, когда начинается анимация и когда она заканчивается (просто для проверки времени анимации)
  • Проверьте, поддерживает ли браузер эту анимацию: вы можете использовать код jQuery как резервный режим

Дополнительные сведения об обнаружении поддержки CSS-анимации: https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support

Пример: http://jsfiddle.net/CUbgr/5/