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
Jul 23 2013 extJS уроки MODx Revolution перевод документации Виктор Матушевский