Как анимировать 3D мокапы в Spline за 5 минут
Spline — основной инструмент для анимации и создания 3d интерактивных ассетов для сайтов и приложений. Еще там можно работать одновременно вместе. А еще ребята прикрутили офигенный AI (правда только в paid-версии) и вообще всячески развивают сервис. 👏
Бесплатной версии хватает для выполнения кучи задач. Сегодня научимся анимировать 3D мокапы — все инструменты уже есть в Spline.
Заходим, регистрируемся. Можно все сделать в браузере, можно скачать прогу на комп, разницы никакой.
1.
В библиотеке Сплайна много готовых сцен и объектов!
Левое меню → Library → Product → IPhone14Pro
2.
В левом меню добираемся до объекта Screen
3.
В правом меню ищем Materials (промотайте немного вниз). Справа от Image нажимаем шахматную иконку.
Открывается дополнительное окно, но оно нам не нужно. Чуть ниже в правом меню появляется превью картинки и кнопка Upload Image поверх нее. Нажимаем и грузим подготовленные скрины.
ВАЖНО: Экспортируйте скрины максимально большими
(4x из фигмы например)
4.
Удаляем надпись про “Select the screen…” справа от айфона. Ищем в левом меню IPhone 14 Pro, нажимаем. Теперь будем настраивать два Состояния (States) для нашего айфона: начальное и конечное.
Для начала удалите предустановки в States (это в верхней части меню) и в Events. Для этого подведите мышку справа от строки Base State и State, появится красная полукнопка для удаления. Тоже самое проделайте для Mouse Hover и Mouse Down в Events.
5.
Теперь еще раз нажимаем на “плюс” у States. Появляется снова два состояния: Base State — это начальное положение, State — конечное. Нажимаем на Base State, спускаемся чуть ниже в правом меню до строки Rotation и параметр Y меняем на 90.
Нажимаем на второе состояние State. Теперь наша задача поставить айфон в конечное положение анимации. Для упрощения урока вернем все как было: Rotation на 0.
6.
Настраиваем Events. Тапаем “плюс”, выбираем Transitions в новом окне.
И еще раз нажимаем на кнопку Transition (IPhone 14 Pro) в новом окне. Теперь по событию Start у нас будет происходить событие Transition. Осталось только его настроить. Проверяем, чтобы Transitions было из (1) Base State в (2) State. Можно дополнительно настроить изинг (моушн преобразования) между 1 и 2.
8.
Проверяем анимацию, нажав в верхнем меню Play.
9.
Экспортируем видео. Рядом с Play нажимаем Export, выбираем Video Recording. Затем внизу Start. В новом окне сразу начнется анимация, но как только вы нажмете внизу красный кружок “Записи”, анимация начнется снова. Не забудьте нажать Stop.
Теперь у вас есть классная анимированная моделька с вашим дизайном. Разве не круто? ✨🚀
P.S.
Изменить цвет фона можно, выделив в левом меню Scene, затем в правом меню Scene — BG Color.
Экспериментируйте с несколькими объектами (дублируйте модель в левом меню), положением модели в состояниях и вообще ИССЛЕДУЙТЕ Spline — он офигенный :)
Если понравилось, похлопайте в ладошку 👋
↓ (вот тут)
