Блог

У меня есть сложная последовательность анимации, включающая затухания и переходы в JavaScript. Во время этой последовательности, которая состоит из четырех элементов, изменяющихся одновременно, для каждого элемента используется setTimeout .

При тестировании в Internet Explorer 9 анимация работает со скоростью реального времени (она должна была занять 1,6 секунды, а заняла ровно 1,6 секунды). ЛЮБОЙ другой браузер будет ужасно запаздывать со временем анимации 4 секунды (Firefox 3 и 4, Chrome, Opera) и примерно 20 секунд в IE 8 и ниже.

Как IE9 может работать так быстро, в то время как все остальные браузеры застряли в грязи?

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

РЕДАКТИРОВАТЬ: Чтобы уточнить в ответ на комментарии, вот схема кода:

 link.onclick = function() {
    clearTimeout(colourFadeTimeout);
    colourFadeTimeout = setTimeout("colourFade(0);",25);

    clearTimeout(arrowScrollTimeout);
    arrowScrollTimeout = setTimeout("arrowScroll(0);",25);

    clearTimeout(pageFadeOutTimeout);
    pageFadeOutTimeout = setTimeout("pageFadeOut(0);",25);

    clearTimeout(pageFadeInTimeout);
    pageFadeInTimeout = setTimeout("pageFadeIn(0);",25);
}
  

Каждая из четырех функций увеличивает время затухания на один кадр, затем устанавливает другой тайм-аут с увеличенным аргументом до конца анимации.

Вы можете посмотреть страницу по адресу http://adamhaskell.net/cw/index.html (Имя пользователя: knockknock; Пароль: goaway) (у него есть звук и музыка, которые можно отключить, но будьте осторожны!) — мой JavaScript очень неаккуратен, поскольку я на самом деле не организовал его должным образом, но он немного прокомментирован, так что, надеюсь, вы сможете увидеть, в чем заключается общая идея.

Несколько вещей:

1. Ваш тайм-аут составляет 25 мс. Это приводит к 40 кадрам в секунду, что является очень высокой частотой кадров, которую можно попытаться достичь с помощью javascript. Особенно для вещей, связанных с манипуляциями с DOM, которые могут вызвать перепрошивки. Увеличьте его до 50 или 60. 15 кадров в секунду должно быть более чем достаточно для тех видов анимации, которые вы делаете. Вы не пытаетесь отображать здесь видео, просто перемещаете объекты по странице.

2. Не используйте strings в качестве первого параметра для setTimeout() . Особенно если вы заботитесь о производительности. Это заставит javascript перекомпилировать строку в каждом кадре анимации. Вместо этого используйте функцию. Если вам нужно передать аргумент, используйте анонимную функцию для переноса функции, которую вы хотите выполнить:

    setTimeout(function(){
       pageFadeIn(0)
   },50);
     

   это будет скомпилировано только один раз при загрузке скрипта.

3. Как упоминал Бен, дешевле использовать один setTimeout для планирования функций. Если уж на то пошло, ясность кода может улучшиться, если вместо этого использовать setInterval (а может и нет, зависит от вашего стиля кодирования).

Дополнительный ответ:

Программирование анимации на javascript — это оптимизация и компромисс. На странице можно анимировать множество объектов с небольшим замедлением, но вам нужно знать, как это сделать правильно, и решить, чем пожертвовать. В качестве примера того, как много можно анимировать одновременно, можно привести демо-версию стратегической игры в реальном времени, которую я написал пару лет назад.

Среди вещей, которые я сделал для оптимизации игры, следующие:

1. Шагающие солдаты состоят всего из двух кадров анимации, и я просто переключаюсь между двумя изображениями. Но, тем не менее, эффект очень убедительный. Вам не нужна идеальная анимация, достаточно той, которая выглядит убедительно.

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

Что ж, это многовато для javascript (несмотря на «четырехкратную дозу удивительности» 🙂

Вы запускаете много последовательностей setTimeout, я не уверен, насколько хорошо движки JS оптимизированы для этого .. особенно IE <= 8

Хорошо, может быть, просто приблизительное предложение… Возможно, вы могли бы написать небольшой механизм синхронизации.

Поддерживайте глобальный объект, который хранит ваши текущие запущенные временные события с функцией для запуска и задержкой…

Затем создайте один обработчик setTimeout, который проверяет соответствие этому глобальному объекту и уменьшает задержку на каждой итерации, и вызывайте функцию, когда задержка становится < 0

ваше глобальное событие выглядело бы примерно так:

 var events = {

        fade1 : {
            fn : func_name,
            delay : 25,
            params : {}
        }

        fadeArrow : {
            fn : func_name,
            delay : 500,
            params : {}
        }

        slideArrow : {
            fn : func_name,
            delay : 500,
            params : {
                arrow:some_value
            }
        }

    }
  

затем создайте функцию для перебора этих вызовов с интервалом (возможно, 10 или 20 мс) и уменьшите задержки до их завершения и запустите функцию с параметрами в качестве параметра функции (проверьте Function.call для этого).

После завершения работы запустите setTimeout снова с той же задержкой..

Чтобы отменить событие, просто отключите свойство из списка событий..

Создайте несколько методов для добавления / удаления событий в очереди, обновления параметров и так далее..

Это сократило бы все до одного обработчика тайм-аута..

(просто идея)