В настройках любого элемента в нулевом блоке есть опция добавления анимации. Есть два типа анимации: базовая и более сложная — пошаговая. В этой статье мы рассмотрим функции и особенности базовой анимации.
Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Статья о сложной пошаговой анимации: основные принципы, настройки и примеры
Справка по сложной триггерной анимации: настройка и примеры
Как автоматически импортировать макет из Figma в Zero Block
Определяем базовую структуру дизайна и ускоряем работу с макетом
Раздел базовой анимации имеет несколько опций:
- Animation — это разные варианты анимации появления элемента;
- Parallax — это настройки эффекта параллакса элемента;
- Fixing — это настройки эффекта фиксации
Animation
У анимации появления есть несколько вариантов — простое появление (Fade In), появление справа, слева, сверху и снизу (Fade In Right, Fade In Left, Fade In Up,Fade In Down) и появление с увеличением (Zoom In).
В настройках каждого вида анимации появления есть общие опции Duration, Delay и Trigger Offset.
Duration — это время анимации в секундах. Оно позволяет установить, как долго будет появляться элемент;
Delay — задержка перед началом анимации в секундах;
Trigger Offset — это отступ в пикселях от нижнего края Window-контейнера, при котором начнет воспроизводиться анимация.
При использовании анимаций с появлением сверху, снизу, справа или слева появляется дополнительно параметр Distance — это дистанция, которую проходит блок, пока появляется с нужного края.
При использовании появления с увеличением (Zoom In) есть параметр Scale — если он меньше 100%, то объект увеличивается до исходного размера, если больше — то уменьшается.
Duration — это время анимации в секундах. Оно позволяет установить, как долго будет появляться элемент;
Delay — задержка перед началом анимации в секундах;
Trigger Offset — это отступ в пикселях от нижнего края Window-контейнера, при котором начнет воспроизводиться анимация.
При использовании анимаций с появлением сверху, снизу, справа или слева появляется дополнительно параметр Distance — это дистанция, которую проходит блок, пока появляется с нужного края.
При использовании появления с увеличением (Zoom In) есть параметр Scale — если он меньше 100%, то объект увеличивается до исходного размера, если больше — то уменьшается.
Parallax
Анимация параллакса имеет две настройки — параллакс может быть по скроллу и по движению мыши.
Параллакс по скроллу
Параллакс по движению мыши
В настройках параллакса по скроллу есть настройка скорости параллакса (Speed). Если скорость указана меньше, чем 100%, то элемент движется медленнее скролла страницы, если скорость больше 100% — то быстрее.
В настройках параллакса по движению мыши есть настройки дистанции по осям X и Y, они устанавливают максимальное отклонение элемента при параллаксе.
В настройках параллакса по движению мыши есть настройки дистанции по осям X и Y, они устанавливают максимальное отклонение элемента при параллаксе.
Fixing
У анимации фиксации есть выбор настройка области фиксации объекта. Это та область экрана, (верх, центр, низ) относительно которой стартует эффект фиксирования. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom).
Настройка Trigger Offset — это точка начала фиксации объекта относительно выбранного Window Top / Window Center / Window Bottom.
Distance — это расстояние в пикселях, которое должен пройти объект в режиме фиксации.
Настройка Trigger Offset — это точка начала фиксации объекта относительно выбранного Window Top / Window Center / Window Bottom.
Distance — это расстояние в пикселях, которое должен пройти объект в режиме фиксации.
По анимации фиксации мы рекомендуем прочитать статью «Анимация на Тильде: эффект фиксации», где создание этого эффекта разобрано на конкретном примере.
