Рекомендуемые методы для более плавного перехода изображения

Question

Я создаю слайд-шоу и хотел бы включить плавные (субпиксельные) переходы изображений, включающие скольжение и изменение размера, как, например, эффект Кена Бернса.

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

• CSS переходы
• JavaScript requireanimationframe
• изображение, встроенное в элемент canvas
• другой

Примечание: я обязуюсь, что некоторые из этих методов не поддерживаются в старых браузерах. У меня вопрос к самым последним версиям (IE9, Firefox 5 и т. Д.).

Answer 1

См. Следующий пост на Оптимизация производительности Javascript :

В нем изложены различные техники исполнения по 5 широким предметам:

1. Как избежать взаимодействия с хост-объектами (DOM)
2. Управление и активное сокращение ваших зависимостей
3. Дисциплинированная привязка событий
4. Максимизация эффективности ваших итераций
5. Подружитесь с лексиконом JavaScript

Те, которые в наибольшей степени применяются к плавным переходам изображений, находятся в разделах 1, 3 и 4, в частности, использование ссылок на указатели на объекты DOM браузера (чтобы вам не приходилось обходить DOM несколько раз), применяя изменения DOM в пакетах и оптимизация эффективности ваших итераций.

Однако все 5 разделов полезны для создания быстродействующего интерфейса

Answer 2

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

CSS-переходы предназначены для плавного переключения между двумя состояниями элемента.

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

Использование Javascript для анимации может быть немного трудоемким, и если вы хотите манипулировать dom в каждом кадре, это может быть тяжелым для производительности.

Я также думаю, что canvas - это не лучшее решение, потому что элемент canvas не может быть динамически масштабируемым без проблем (в частности, производительность).