Производительность браузера при сочетании изменения размера изображения с анимированным движением - PullRequest
4 голосов
/ 14 февраля 2011

Мне было поручено преобразовать Flash-анимацию в HTML. Анимация довольно сложна и требует перемещения нескольких изображений (9) из местоположения (x, y) в местоположение (x2, y2), одновременно увеличивая размер изображения с 215 пикселей в ширину до 930 пикселей в ширину.

Выполняя первоначальное тестирование этой анимации всего с 1-2 изображениями, я заметил, что при обработке этой анимации в FF происходит много изменений. Чтобы попытаться изолировать проблему, я удалил динамическое изменение размера анимации и просто переместил ее из точки А в точку Б.

Интересно было то, что я видел такое же поведение, когда просто перемещал изображение размером 930 пикселей, размер которого был уменьшен до 215 пикселей (через свойства CSS width или inline width).

Когда я пробую ту же анимацию с другим изображением, которое на самом деле имеет ширину 215 пикселей, оно работает плавно. Затем я попробовал ту же анимацию с исходным изображением шириной 930 пикселей (без изменения размера), и она также показала хорошие результаты.

Это заставляет меня задаться вопросом, приходится ли браузеру «изменять» размер изображения до 215 пикселей при каждом его перемещении, что вызывает прерывистость. Это правильное предположение? Если да, есть ли другой способ оптимизировать анимацию для одновременного изменения размера изображения и его перемещения?

Примечания: 1) Одна оптимизация, которую я сделал, - это позиционирование изображений абсолютно, чтобы минимизировать процесс переформатирования. 2) Я протестировал анимацию с использованием jQuery и фреймворка fX.

1 Ответ

0 голосов
/ 11 мая 2011

Вряд ли возможно добиться плавной анимации с использованием элементов. Лучший способ решить вашу проблему - использовать комбинацию технологий: CSS Animations для браузеров на основе WebKit, анимация на основе других современных браузеров (ff3-4, ie9) и, возможно, filter: transform (), если вам нужно, например, 6-8 .

...