[Фича 5] Делаем зацикленную круговую анимацию
Всем привет! Подготовил совсем небольшой урок, наверное самого распространённого эффекта с анимации, который дизайнеры делают на тильда.
Анимация простая, делается в три клика, выглядит эффектно. Поехали!
Анимация выглядит примерно так.
Шаг 1. Готовим изображение
Берём изображение, которое будет крутиться вокруг своей оси. Я сделал его в .png, но в очередной раз повторю, что лучше всего использовать svg формат. Скачать моё изображение можно тут: https://imgur.com/a/qru99dy
Шаг 2. Добавляем изображение в Zero Block
Пошаговая анимация доступна только в Zero Block, поэтому идём туда и добавляем наше изображение в контейнер рабочей области.
Шаг 3. Пошаговая анимация
Открываем настройки изображения, открываем Step by step animation.
Устанавливаем:
— Event: element on screen (действие выполняется, как только изображение появляется на экране)
— Loop: Loop (анимация воспроизводится снова и снова, непрерывно)
— Добавляем первый шаг (Step 1)
— Duration: длительность цикла анимации, чем она больше — тем медленнее будет крутиться наш круг. Например установим значение 5 — круг обернется в течение 5 секунд.
— Rotate: ставим тут 360 (наше изображение обернётся вокруг своей оси на 360 градусов).
Закрываем, сохраняем и публикуем. Готово!
Применение нескольких эффектов анимации к одному объекту
PowerPoint для Microsoft 365 PowerPoint для Microsoft 365 для Mac PowerPoint 2021 PowerPoint 2021 для Mac PowerPoint 2019 PowerPoint 2019 для Mac PowerPoint 2016 PowerPoint 2016 для Mac PowerPoint 2013 Еще. Меньше
В настольных приложениях PowerPoint можно применять несколько эффектов анимации к одной строке текста или объекту, например к изображению, фигуре или Графический элемент SmartArt.
Совет: При работе с несколькими эффектами анимации удобнее всего начать с области анимации, где можно просмотреть список всех эффектов анимации для текущего слайда.
Открытие области анимации
- Выделите на слайде объект или текст, который нужно анимировать.
- На вкладке Анимация нажмите кнопку Область анимации.
- Нажмите кнопку Добавить анимацию и выберите эффект анимации.
- Чтобы применить дополнительные эффекты анимации к тому же объекту, выберите его, нажмите кнопку Добавить анимацию и выберите еще один эффект.
Важно: После применения первого эффекта анимации добавить дополнительные эффекты можно лишь одним способом: нажать кнопку Добавить анимацию. Пользуясь любым другим способом, вы лишь замените текущий эффект новым.
Настройка времени начала и длительности показа эффекта анимации
Вот что нужно сделать, чтобы управлять временем воспроизведения эффектов анимации:
- В разделе Область анимации щелкните стрелку вниз возле эффекта анимации и щелкните вкладку Время.
- На вкладке Время щелкните стрелку вниз в разделе Начало и выберите время начала.
- Чтобы воспроизведение начиналось по щелчку мыши, выберите пункт По щелчку.
- Чтобы эффект анимации запускался одновременно с предыдущим эффектом, выберите пункт С предыдущим
- Чтобы запускать эффекты последовательно, выберите пункт После предыдущего.
Совет: Предыдущий эффект анимации указан в порядке воспроизведения в области анимации (обычно находится непосредственно над эффектом, для которого вы устанавливаете время).
- Чтобы отложить запуск эффекта анимации, щелкните стрелку вверх возле пункта Задержка столько раз, сколько нужно, чтобы установить нужное количество секунд.
- Чтобы изменить скорость эффекта анимации, задайте нужную Продолжительность.
- Чтобы просмотреть, как эффекты анимации выглядят вместе, на вкладке Анимация нажмите кнопку Просмотр.
Одновременное воспроизведения нескольких анимационных эффектов
Вы можете использовать одного объекта два или несколько эффектов анимации одновременно для. Например, изображение может исчезать и всплывать. Чтобы выполнить такое наложение двух (или нескольких) эффектов одновременно, сделайте следующее:
- Используйте Добавить анимацию для добавления второго эффекта.
- Для времени воспроизведения второго эффекта установите Запаздывающее на С предыдущим.
Совет по работе с несколькими эффектами анимации
При работе с несколькими объектами на слайде может быть сложно выделить объекты и примененные к ним эффекты анимации.
На рисунке ниже имена объектов по умолчанию не очень информативны, поэтому сложно сказать, к какому объекту применен каждый отдельный эффект.
В области выделения вы можете дать уникальное имя каждому объекту, чтобы с ними было легче работать при применении эффектов анимации. См. ниже.
- Чтобы изменить имена объектов по умолчанию, на вкладке Главная нажмите Выделить и щелкните Область выделения.
- В области выделения дважды щелкните имя объекта по умолчанию, чтобы открыть поле, и введите новое имя объекта.
Дополнительные сведения о работе с анимационными эффектами
- Изменение порядка воспроизведения эффектов анимации
- Запуск воспроизведения эффектов анимации
- Добавление анимации пути перемещения
Анимация на Тильде
У Тильды 3 вида анимации. Базовые эффекты появления элементов делаются на стандартных блоках. В Zeroblock больше возможностей, где настраиваются базовые эффекты или пошаговая анимация.
ЭФФЕКТЫ В СТАНДАРТНЫХ БЛОКАХ
2 варианта анимации
Можно настроить появление элементов с любой стороны или методом увеличения.
Легко настраивать
Настройка таких эффектов доступна даже начинающему пользователю Тильды.
Не увеличивают время загрузки
Эффекты не утяжеляют сайт, поэтому на время загрузки не влияют.
БАЗОВАЯ АНИМАЦИЯ В ZERO-БЛОКЕ
Самые популярные виды анимации, часть которых взята из стандартного функционала, но с возможностью дополнительной настройки. Это эффекты появления при увеличении или через прозрачность справа, слева, сверху или снизу, фиксацию элементов и параллакс-эффект. Дополнительно можно менять характеристики этой анимации: настраивать скорость, расстояние, отступы и задержку.
Zero block
Click „Block Editor» to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Широкий выбор
Можно настроить появление элементов с любой стороны или методом увеличения, прозрачности. Создать параллакс эффект или фиксировать его при скролле.
Дополнительные настройки
Можно задавать скорость появления элемента, задержку. Настроить расстояние, откуда появится элемент. Задать ему положение относительно экрана.
Настройка каждого элемента
В одном блоке можно настроить анимацию для каждого элемента свою. Задать разные характеристики эффектам. Дизайн сайта приобретет индивидуальность.
ПОШАГОВАЯ АНИМАЦИЯ В ZERO-БЛОКЕ
Step-by-step анимация — это настройка трансформации или движения элемента для каждого шага. Если в базовой анимации в Zero-блоке после появления элемент будет принимать статичное положение или фиксироваться при скролле, то в пошаговой анимации значительно больше возможностей. Можно менять траекторию движения, скорость, прозрачность, поворачивать элемент и задавать ему действия по наведению и клике курсора. С такой анимацией воплощаются самые креативные идеи дизайнера. Сайт становится уникальным и запомнится пользователю.
Zero Block: пошаговая анимация
Посмотрите видеоурок о том, как работать с пошаговой анимацией в Zero Block или прочитайте подробную инструкцию ниже.
Внутри Zero Block есть два режима анимации:
1) Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.
2) Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.
Страница с примерами возможностей пошаговой анимации https://tilda.cc/ru/lp/step-by-step-animation/
Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Справка по простой анимации: фиксации, параллаксу и анимации появления
Справка по сложной триггерной анимации: настройка и примеры
Как автоматически импортировать макет из Figma в Zero Block
Определяем базовую структуру дизайна и ускоряем работу с макетом
Начало работы с пошаговой анимацией
Пошаговая анимация доступна в Zero Block — редакторе для профессиональных дизайнеров. Добавьте его на страницу из библиотеки блоков (в самом низу, после категории «Другое»). Или кликните на иконку Zero Block в меню быстрого добавления блоков внизу страницы.
Нажмите «Редактировать блок» в левом верхнем углу блока, чтобы перейти в режим редактирования.
Добавьте новый элемент, выделите его, откройте настройки, пролистайте до раздела Step by Step Animation и нажмите кнопку Add.
Создание пошаговой анимации отменит все настройки базовой анимации для элемента.
Выбор условия начала анимации
- Element on Screen — анимация начинается при появлении элемента на экране;
- Block on Screen — анимация начинается при появлении на экране всего текущего блока;
- On Scroll — анимация запускается и продолжается во время скролла;
- On Hover — анимация появляется при наведении на элемент;
- On Click — анимация начинается при клике на элемент.
У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.
- Start Trigger — это то, к чему будет привязана анимация или что будет являться ее триггером. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom);
- Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
- Loop — это опция зацикливания анимации.
C помощью опции Test и кнопок Play Element / Play All можно проиграть анимацию этого элемента или всех элементов в блоке.
Добавление шагов анимации
Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться.
Чтобы добавить шаг, нажмите на кнопку Add Step.
Между шагами можно переключаться. При этом синяя обводка элемента означает стандартное состояние, зеленая — редактирование шага.
Чтобы изменить начальное состояние объекта, например, чтобы объект в начале был невидим (значение Opacity равное нулю), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.
У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.
Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.