[Фича 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 градусов).

Закрываем, сохраняем и публикуем. Готово!