Анимация с помощью Émile
Думаю в каждом известном сейчас JavaScript фреймворке есть отдельный модуль занимающийся CSS-анимацией. Только эти фреймворки с каждым днем становятся все пузатее и пузатее, с огромным, “богатым” набором возможностей ;). На простых проектах зачастую нехватает только CSS-анимации, и в этом нам очень сильно может помочь мини-фреймворк Émile. Он содержит всего 47 строк кода, занимает в сжатом виде 1,6Kb и добавляет всего лишь 1 функцию такого вида:
emile(element, style, options, after);Поясню назначение параметров:
- element: id элемента или сам элемент над которым будет проходить анимация
- style: стили которые будут являтся конечной точкой анимации
- options: необязательный параметр, несколько опций
- duration: время анимации в миллисекундах
- after: функция которая будет вызвана после того как анимация закончится
- easing: функция которая управляет ходом анимации
- after: необязательный параметр, функция которая будет вызвана после того как все закончится, в дополнение к options.after
Émile корректно работает на всех необходимых, по-моему мнению, браузерах:
- Microsoft Internet Explorer для Windows, версия 6.0 и выше
- Mozilla Firefox 1.5 и выше
- Apple Safari 2.0.4 и выше
- Opera 9.25 и выше
- Chrome 1.0 и выше
Это очень мощный фреймворк для работы с анимацией, с помощью его параметров можно организовать любую сложную анимацию на ваших сайтах. Несколько примеров можно увидеть в статье Getting Started With Emile.
Разработчиком Émile является Thomas Fuchs, который уже приложил руку к большому фреймворку script.aculo.us и его второй версии scripty2.com.
Исходники Émile можно взять с GitHub.