[Фича 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 градусов).
Закрываем, сохраняем и публикуем. Готово!