Анимация по триггеру "Появление на экране"
Триггер Появление на экране позволяет настроить анимацию, которая будет срабатывать при появлении элемента на экране.
Смотрите подробный урок по созданию и адаптации анимации по триггеру «Появление на экране»:
Основные действия при работе с анимациями:
Настройка позволяет установить момент начала воспроизведения анимации на экране. По умолчанию выбран параметр «Элемент начинает появляться во вьюпорт», то есть при появлении верхней границы элемента на экране.
При выборе параметра «Половина элемента появилась во вьюпорт» старт анимации будет происходить в момент появления середины элемента на экране.
При выборе параметра «Элемент полностью появился во вьюпорт» старт анимации будет происходить в момент, когда элемент полностью появится в границах видимой пользователю области страницы.
Настройка отвечает за воспроизведение анимации при повторном появлении элемента на экране. По умолчанию данный параметр выключен — анимация сработает только при первом появлении элемента на экране.
Если выбрать «Да», анимация будет срабатывать каждый раз, когда элемент появится на экране.
Настройка отвечает за непрерывное воспроизведение анимации на экране. По умолчанию данный параметр выключен, анимация будет воспроизведена только один раз.
Зацикливание по кругу (Loop) - после окончания анимации ее воспроизведение начнется заново с первого кадра.
Зеркальное зацикливание (Loop with reverse) - после окончания анимации ее воспроизведение начнется в обратном направлении.
Вы можете выбрать один из предустановленных пресетов — это добавит набор эффектов с уже заданными настройками. Для триггера appear on screen доступны следующие виды пресетов:
- Проявление (Fade In)
- Увеличение (Scale In)
- Увеличение снизу (Scale In Bottom)
- Отражение по горизонтали (Flip Horizontal)
- Отражение по вертикали (Flip Vertical)
- Скольжение вверх (Slide In From Top)
- Скольжение влево (Slide In From Left)
- Скольжение вправо (Slide In From Right)
- Скольжение вниз (Slide In From Bottom)
- Пользовательский (Custom)
По умолчанию при добавлении триггера для анимации в настройках пресетов установлен параметр проявление (Fade In).
Если вы добавите новые эффекты или измените текущие, автоматически установится пользовательский пресет (Custom). Выбор предустановленного пресета сбросит все ваши настройки до значений, заданных по умолчанию для данного пресета.
Эффекты отвечают за то, какие действия будут происходить с элементом при появлении на экране. Чтобы добавить эффект, нажмите на «+» справа.
Для настройки доступны 6 эффектов:
- Движение (Move) — позволяет передвигать элемент по оси X, Y и Z.
- Масштабирование (Scale) — позволяет масштабировать (увеличивать или уменьшать) размеры элемента в пределах от 0 до 100% (значения от 0 до 1) или более 100% (значения больше 1).
- Поворот (Rotate) — позволяет поворачивать элемент по оси X, Y и Z.
- Наклон (Skew) — позволяет наклонять элемент по оси X и Y.
- Непрозрачность (Opacity) — позволяет менять непрозрачность элемента от 0 (полностью невидимый) до 100% (полностью видимый) или наоборот (от видимого к невидимому).
- Размер (Size) — позволяет менять размер элемента по ширине и высоте.
Кликнув на название эффекта, вы перейдете к его настройкам. Здесь вы можете просмотреть заданные по умолчанию опции и установить желаемые параметры.
Для эффектов доступны следующие настройки:
Начало (Start) и Конец (End)
Настройка позволяет задать значение параметров эффекта в начале и в конце анимации.
Время (Timing)
Можно установить длительность анимации и задержку начала эффекта в секундах.
Интерполяция (Easing)
Настройка позволяет задать паттерн ускорения и замедления эффекта на всем протяжении анимации, чтобы улучшить ее восприятие.
Начало и окончание в настройках эффектов учитывает исходное состояние элемента, и никак не связано с настройками начала и окончания других эффектов. Последовательное воспроизведение эффектов достигается настройкой задержки. Если у нескольких эффектов задержка равна нулю, то они воспроизведутся одновременно.
Добавленный эффект можно удалить на любом разрешении, нажав на три точки и выбрав соответствующее действие, при том он будет удален на всех разрешениях. Если вы не хотите воспроизводить эффект на выбранном разрешении, его можно скрыть кликом на значок глаза справа от названия.
Здесь вы можете отключить анимацию на различных брейкпоинтах. По умолчанию анимация включается на все разрешения.
Настройки наследуются от базового разрешения. Например, если отключить анимацию на планшете, то она будет работать только на компьютере, мобильные брейкпоинты будут отключены.
Вы можете включить или отключить воспроизведение анимации для каждого устройства, переведя свитчер в соответствующее положение.
