Эффективный способ анимировать абсолютную позицию div в контейнере

Question

В настоящее время я работаю над сайтом, который динамически строит «город» из маленьких строительных блоков. Здания и городские реквизиты позиционируются с использованием «position: absolute» и «left». Все они лежат в контейнере div (также с «position: absolute»), который, в свою очередь, накладывается на другой div (с «position :lative»), который ограничивает видимую часть с помощью «overflow: hidden». Чтобы расположить пользовательскую камеру, я обновляю CSS-свойство контейнера «div», эффективно перемещая содержимое влево или вправо. Пока все хорошо.

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

Вы можете проверить это здесь: <<a href="http://dev.lqdi.net/porto-shopping/" rel="nofollow"> веб-сайт >

Сценарий: <<a href="http://dev.lqdi.net/porto-shopping/application/shopping/views/js/script.js" rel="nofollow"> script >

У кого-нибудь есть предложения, как мне это оптимизировать?

Answer 1

use jQuery.animate ()

Это позволит вам выполнить то, что вы хотите, и, вероятно, это будет лучше оптимизировано, чем то, что у вас есть в настоящее время.

Обновление:Вот мой пример !

Надеюсь, это поможет.

Answer 2

В итоге я оптимизировал это, заменив абсолютное позиционирование позиционированием с прокруткой и использовав трюк requestAnimationFrame в Mozilla и Webkit для повышения производительности кадровой частоты. Вот некоторые советы для тех, кто сталкивается с этой проблемой:

О функции requestAnimationFrame () (эффективные асинхронные анимации в браузерах с поддержкой): https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame

Получение и обновление позиции прокрутки div в jQuery: http://api.jquery.com/scrollLeft/