Как сделать бегущую строку сквозь объект в Figma
Чтобы создать бегущую строку сквозь объект, нам понадобится изображение с объектом, а также изображение этого объекта без фона.
Шаг 1
- Создаём фрейм (F).
- Добавляем два изображения, одно целое с фоном, второе только объект без фона.
Шаг 2
- Добавляем текст (T) и копируем текст несколько раз, чтобы текстовое поле выходило за пределы фрейма.
- Дублируем слой с текстом.
У копии текста выключаем заливку и добавляем обводку.
*На видео шрифт Unbounded.
Шаг 3
Помещаем изображение, на котором только объект между текстовыми слоями.
Шаг 4
- Дублируем фрейм.
- Сдвигаем оба текстовых слоя влево, до того момента, пока последняя надпись внутри слоя не встанет на то же место, где начиналась первая.
Шаг 5
Связываем слои 1–2 со следующими настройками:
- After delay — 1ms
- Smart animate
- Linear — 10000ms.
Шаг 6
Связываем слои 2–1 со следующими настройками:
- After delay — 1ms
- Smart animate
- Linear — 1ms.
Готово!
Теперь ты умеешь создавать бегущую строку сквозь объект. Эта анимация отлично подойдёт для главных экранов, а также для визуальных разделителей между блоками. Изменяйте шрифт, цвет текста и фона, и получайте новые результаты анимации.
Рекомендуем ознакомиться:
Как сделать обводку с отступом в Photoshop
Разбираем на практике, как делать обводку с отступом для объекта в программе Photoshop.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
