Создание космической анимации в Figma
Для создания космической анимации нам понадобится изображение планеты без фона, которая будет перемещаться по экрану.
Шаг 1
- Создаём фрейм с цветом #000000.
- Добавляем текст, картинку космоса и планету.
- Выносим планету за пределы фрейма.
Шаг 2
- Дублируем фрейм.
- На скопированном фрейме поднимаем планету, увеличиваем её и поворачиваем на 90°.
- Увеличиваем изображение на заднем фоне.
- Добавляем кнопку.
Шаг 3
Связываем слои:
- After delay — 1ms
- Smart animate
- Slow — 2000ms.
Шаг 4
- Дублируем фрейм.
- Переносим планету вправо, увеличиваем и поворачиваем ещё на 90°
- Добавляем новый текст, поворачиваем и переносим кнопку.
Шаг 5
Создаём анимацию от кнопки к фрейму:
- On click
- Smart animate
- Slow — 1500ms.
Шаг 6
- Дублируем фрейм.
- Изменяем кнопку.
Связываем слои от кнопки к фрейму:
- While hovering
- Smart animate
- Slow — 1500ms.
Шаг 7
- Дублируем фрейм.
- Переносим планету влево и поворачиваем ещё на 90°.
- Добавляем текст.
Шаг 8
Создаём анимацию от кнопки к фрейму:
- On click
- Smart animate
- Slow — 1500ms.
Готово!
Теперь ты знаешь, как создавать необычную космическую анимацию в Figma. Интересная анимация, которая не даст заскучать пользователю на вашем сайте. Меняйте тематику, используйте другие объекты и совершенствуйте данную анимацию.
Рекомендуем ознакомиться:
Создаем глитч эффект в Figma
Замечали, как современные дизайнеры мастерски добавляют нотку хардкора, создавая эффектные дизайны с глитч эффектом? Хотите добавить такой в свои проекты?
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
