3. Ext JS - Анимация

Последнее обновление Dec 5th, 2019 | История страницы | Улучшить эту страницу | Сообщить о проблеме

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$306 per month—let's make that $500!

Learn more

Анимации¶

Еще раз, мы включаем необходимые JS и CSS:

<link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>

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

    <script type="text/javascript">
        Ext.onReady(function() {
            var myDiv1 = Ext.get('div1');
            myDiv1.setSize(350,350, {duration: 1, easing:'bounceOut'});
        });
    </script>

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

    <style type="text/css">
        .myDiv {
            border: 1px solid #AAAAAA;
            background: yellow;
            width: 200px;
            height: 35px;
        }
    </style>

Наконец, создайте div в теле вашего HTML:

<div id="div1" class="myDiv"></div>

Когда вы закончите, эта страница должна выглядеть примерно так:

<html>
    <title>Моя тестовая страница Ext JS: Анимация</title>
    <link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
    <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
    <script type="text/javascript">

        Ext.onReady(function() {
            var myDiv1 = Ext.get('div1');
            myDiv1.setHeight(200);
            myDiv1.setSize(350,350, {duration: 1, easing:'bounceOut'});
        });
    </script>

    <style type="text/css">
        .myDiv {
            border: 1px solid #AAAAAA;
            background: yellow;
            width: 200px;
            height: 35px;
        }
    </style>
    <body>
        <h1>Анимации</h1>

        <div id="div1" class="myDiv"></div>

    </body>
</html>

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

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

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

myDiv1.setHeight(200);

Плавность¶

Одним из ключей к этому трюку является свойство «плавности». Доступные параметры плавности зависят от того, какая библиотека загружена, но вот краткий список доступных вариантов плавности

Тип плавности	Описание
easeNone	Равномерная скорость между точками.
easeIn	Начинается медленно и ускоряется к концу. (квадратичная)
easeOut	Начинается быстро и замедляется к концу. (квадратичная)
easeBoth	Начинается медленно и замедляется к концу. (квадратичная)
easeInStrong	Начинается медленно и ускоряется к концу. (квартик)
easeOutStrong	Начинается быстро и замедляется к концу. (квартик)
easeBothStrong	Начинается медленно и замедляется к концу. (квартик)
elasticIn	Snap in elastic effect.
elasticOut	Snap out elastic effect.
elasticBoth	Snap both elastic effect.
backIn	Немного откатывается назад, затем меняет направление и движется к концу.
обратно	Overshoots end, then reverses and comes back to end.
backBoth	Немного откатывается назад, затем меняет направление, заканчивается выбросом, затем разворачивается и возвращается к концу.
bounceIn	Отскакивает от начала.
bounceOut	Отскакивает от конца.
bounceBoth	Отскакивает от начала и до конца.