Обновление прогресс бар анимация


Общая идея-это прогресс-бар, который обновляет суммы и процент постоянно.

Это просто становится немного порывистый, когда я запустить несколько из них самостоятельно на той же странице. Я делаю немного математики на каждом шагу, и интересно, если есть лучший способ достичь этого.

$bar.animate({width:percent+"%"}, {
    duration : o.time,
    easing   : 'swing',
    complete : function() { 
        $amount.text('$'+amount.toFixed(2));
        $diff.text('$'+(o.max - amount).toFixed(2));
        $percent.text(Math.floor(percent));
    },
    step : function(now, fx) {
        var actual_amount = (now / 100) * o.max;
        $percent.text(Math.floor(now));
        $amount.text('$'+actual_amount.toFixed(2));
        $diff.text('$'+(o.max - actual_amount).toFixed(2));
        if (o.warning.warning !== 0) {
            if (now > o.warning.alert) {
                $bar.css("background-color", o.alert_color);
            }
            else if (now > o.warning.warning) {
                $bar.css("background-color", o.warning_color);
            }
            else {
                $bar.css("background-color", beginning_color);
            }
        }
    },
});


Комментарии
1 ответ

Когда приведенный выше код получает повторно запустите вам повторно инстанцирования этих функций. Поэтому первое, что я рекомендую, чтобы определить обратные вызовы за пределами непосредственной сферы что бы повторно запустить его таким образом они получают только после создания.

// In a galaxy not so far away…
var animationComplete = function() {
$amount.text('$'+amount.toFixed(2));
$diff.text('$'+(o.max - amount).toFixed(2));
$percent.text(Math.floor(percent));
}, animationStep = function(now, fx) {

};

// meanwhile, back at the farm…
$bar.animate({width:percent+"%"}, {
duration : o.time,
easing : 'swing',
complete : animationComplete,
step : animationStep // Got rid of a trailing comma here…
});

Без контекста трудно сказать, что еще можно уйти. Вы могли усечь все ваши ценности toFixed(2) рано, что бы упростить математику для очень дробные числа, но, вероятно, не достаточно, чтобы вас заметили. Если на раннем этапе вы умножьте все цифры на 100, то вы могли бы полностью справиться с целыми числами, но могут быть некоторые ограничения форматирования вывода, что сделать это трудно.

Все что сказал, Это, вероятно, ваш испуг анимации не имеют ничего общего с производительность выше на JavaScript. Вы можете увидеть некоторые небольшие успехи с помощью CSS переходов и анимации , которая теоретически позволит браузер лучше использовать графическое оборудование. (Вы все еще можете вызвать фактическое CSS изменяет значение с помощью JavaScript.)

2
ответ дан 7 декабря 2011 в 01:12 Источник Поделиться