Анимация по триггеру "Появление на экране"
Смотрите подробный урок по созданию и адаптации анимации по триггеру Появление на экране:
YouTube:
00:00 — Введение 00:19 — Добавляем анимации, варианты анимаций 11:56 — Адаптация анимаций 14:19 — Итоги
VK Видео:
Таймкоды: 00:00 — Введение 00:19 — Добавляем анимации, варианты анимаций 11:56 — Адаптация анимаций 14:19 — Итоги
Триггер Появление на экране позволяет настроить анимацию, которая будет срабатывать при появлении элемента на экране.
Вы можете настроить следующие параметры анимации:
Настройка позволяет установить момент начала воспроизведения анимации на экране. По умолчанию выбран параметр «Элемент начинает появляться во вьюпорт», то есть при появлении верхней границы элемента на экране.
При выборе параметра «Половина элемента появилась во вьюпорт» старт анимации будет происходить в момент появления середины элемента на экране.
При выборе параметра «Элемент полностью появился во вьюпорт» старт анимации будет происходить в момент, когда элемент полностью появится в границах видимой пользователю области страницы.
Настройка отвечает за воспроизведение анимации при повторном появлении элемента на экране. По умолчанию данный параметр выключен — анимация сработает только при первом появлении элемента на экране.
Если выбрать «Да», анимация будет срабатывать каждый раз, когда элемент появится на экране.
Настройка отвечает за непрерывное воспроизведение анимации на экране. По умолчанию данный параметр выключен, анимация будет воспроизведена только один раз.
Зацикливание по кругу (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). Выбор предустановленного пресета сбросит все ваши настройки до значений, заданных по умолчанию для данного пресета.
Эффекты отвечают за то, какие действия будут происходить с элементом при появлении на экране. Чтобы добавить эффект, нажмите на «+» справа.
Для настройки доступны 4 эффекта:
- Непрозрачность (Opacity)
- Движение (Move)
- Поворот (Rotate)
- Масштабирование (Scale)
Кликнув на название эффекта, вы переместитесь в настройки. Здесь вы можете просмотреть настройки, заданные по умолчанию, и самостоятельно задать начало (Start) и окончание (End) действия, его длительность (Duration) и задержку (Delay), а также выбрать значение интерполяции (Easing).
Начало и окончание в настройках эффектов учитывает исходное состояние элемента, и никак не связано с настройками начала и окончания других эффектов. Последовательное воспроизведение эффектов достигается настройкой задержки. Если у нескольких эффектов задержка равна нулю, то они воспроизведутся одновременно.
Добавленный эффект можно удалить на любом разрешении, нажав на три точки и выбрав соответствующее действие, при том он будет удален на всех разрешениях. Если вы не хотите воспроизводить эффект на выбранном разрешении, его можно скрыть кликом на значок глаза справа от названия.
Здесь вы можете отключить анимацию на различных брейкпоинтах. По умолчанию анимация включается на все разрешения.
Настройки наследуются от базового разрешения. Например, если отключить анимацию на планшете, то она будет работать только на компьютере, мобильные брейкпоинты будут отключены.
Вы можете включить или отключить воспроизведение анимации для каждого устройства, переведя свитчер в соответствующее положение.
/