Как сделать анимацию картинки в картинке
Для создания интересной анимации картинки в картинке, нам понадобится изображение, которое мы будем анимировать.
Шаг 1
- Создаём прямоугольник (R).
- Добавляем фотографию. Можно воспользоваться плагином Unsplash.
- Помещаем фотографию поверх прямоугольника, выделяем и создаём маску (Ctrl+Alt+M).
Шаг 2
- Увеличиваем фотографию внутри маски.
- Выбираем группу с маской и создаём из неё фрейм (Ctrl+Alt+G).
- В меню справа поставьте галочку Clip content.
Шаг 3
- Выбираем наш фрейм и создаём их него компонент (Ctrl + Alt + K).
- Добавляем вариант нашему компоненту (кнопка в верхнем меню Add variant).
Шаг 4
- В варианте нашего компонента выбираем фотографию внутри маски и поворачиваем её на 50°.
- Выбираем группу с маской и уменьшаем её до 0 (K).
Шаг 5
Связываем варианты со следующими настройками:
- While hovering
- Smart animate
- Slow — 300ms.
Шаг 6
- Дублируем всю компонентную группу.
- В копии компонентной группы меняем время анимации: Slow — 400ms.
Шаг 7
- Снова дублируем компонентную группу и меняем время анимации: Slow — 550ms.
- Продолжаем дублировать компонентные группы и изменять время анимации.
- Время анимации для всех групп:
1. 250ms; 2. 400ms; 3. 550ms; 4.700ms; 5. 850ms; 6. 1000 ms.
Шаг 8
- Копируем в макет все первые фреймы компонентных групп. И размещаем их в нашем фрейме по порядку, сначала 6-й, затем 5-й поверх 6-го, 4-й поверх 5-го, и т.д.
- В результате в слоях слева должен получится следующий порядок: Component 1, Component 2, Component 3, Component 4, Component 5.
Готово
Необычная анимация для твоих проектов готова. Эту анимацию можно использовать для эффектной загрузки первого экрана или для hover-эффекта на различных карточках.
Рекомендуем ознакомиться:
Бесконечный слайдер в Figma
В этом уроке мы научимся создавать интересный и необычный слайдер в Figma.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
