Ext JS урок 3. Анимация

Как и раньше подключаем нужные стили и скрипты:

Далее добавляем некоторые элементы управления для простой анимации, которая будет менять размер контейнера:

Чтобы подготовить div и сделать нашу анимацию красивее, добавим чуть стилей:

В конце добавим наш контейнер в тело документа:

Когда закончите, то у вас получится что-то вроде

Когда вы откроете это в браузере, то увидите, что контейнер увеличится и станет квадратом.

Демо Пример 1

Другие команды

Также можно использовать setHeight или setWidth методы, например:

myDiv1.setHeight(200);

Смягчение

Ключевым моментом этого приёма является использование параметра "easing". Доступные параменты зависят от используемой библиотеки, вот короткий список доступных параметров смягчения

Тип смягчения Описание
easeNone Равномерная скорость между точками.
easeIn Начинается медленно и ускоряется к концу. (квадратично)
easeOut Начинается быстро и замедляется к концу. (квадратично)
easeBoth Начинается медленно и замедляется к концу. (квадратично)
easeInStrong Начинается медленно и ускоряется к концу. (квартично)
easeOutStrong Начинается быстро и замедляется к концу. (квартично)
easeBothStrong Начинается медленно и замедляется к концу. (квартично)
elasticIn Эластичное защёлкивание.
elasticOut Эластичное отщёлкивание.
elasticBoth Эластичное от(за)щёлкивания.
backIn Слегка отступает, далее меняет направление и двигается к концу.
backOut Забрасывает конец, далее разворачивается и идёт в конец.
backBoth Слегка отступает, далее меняет направление, забрасывает конец, далее возвращается и идёт назад в конец.
bounceIn Отскакивает от начала.
bounceOut Отскакивает от конца.
bounceBoth Отскакивает от начала и конца.

Оригинал статьи: 3. Ext JS Tutorial - Animation