В ходе работы над созданием презентации проекта на Behance столкнулся, с тем что плагины Figmotion и Motion в Figma не сохраняли продолжительную анимацию (более нескольких секунд) в формате .gif.
Для решения проблемы нашел еще один простой способ создания прокрутки в Figma. Что я сделал:
1) Сначала создаём фрейм требуемого размера и в нем создаём два прямоугольника для имитации экрана: прямоугольник побольше - корпус монитора, а прямоугольник поменьше - экран.
2) Далее сохраняем страницу, которую хочу прокрутить в анимации, в формате .jpg.
! Предупреждение:
следует следить за размерами изображений импортируемых в Figma, т.к. при импорте изображений, у которых размер одной из сторон больше 4096px, они сжимаются до этих 4096px по большей стороне с потерей качества. Поэтому при экспорте длинных страниц из Figma лучше разрезать их на несколько частей, а потом склеить импортируемые изображения группировкой.
3) Помещаем изображение страницы над малым прямоугольником, выделил прямоугольник с изображением и применил к ним маску.
4)Далее копируем получившийся фрейм и располагаем его рядом.
5) В фрейме, который скопировали ранее, берём картинку в маске и прокручиваем ее до конца.
6) Далее выбираем первый фрейм и переходим режим прототипирования.
7) Далее соединяем фреймы в нужной последовательности: соединяем первый фрейм со вторым путем перетаскивания стрелочки из кружочка (1) ко второму фрейму (2).
8) Нажимаем на стрелочку (1), соединяющие два фрейма (начальное и конечное состояние анимации). Появляется окно настроек перехода между состояниями (2).
Параметры по-этапно (сверху - вниз):
Параметр 1 - Выбираем "After delay" ( анимация начнется через указанное время), время выставляем 1мс
Параметр 2 - Оставляем как есть ( указывает направление перехода, в нашем случае "Navigate to" к слайду "Пример" (состояние 2))
Параметр 3 - Выбираем "Smart animate"
Параметр 4 - Выбираем как будет вести себя анимация ( можете поэкспериментировать), я выбрал "Ease out": замедление скорости анимации к концу. Время выбираете в зависимости от длины изображения опытным путем.
! Предупреждение:
Максимальное время, которое можно указать в параметре 4 - 10000 мс, т.е. 10 сек. Если изображение, слишком длинное и прокрутка получается очень быстрой, можно разбить прокрутку на большее число состояний и подобрать подходящее время (например, делаем 3 состояния : начало, середина и конец, и соединяем их последовательно)
9) Далее можно запустить получившийся прототип в режиме презентации и посмотреть получившийся результат.
Для записи анимации в формате .gif пришлось воспользоваться дополнительной программой для записи с экрана в гифку. Я использовал ScreenToGif.
Если возникнут вопросы, пишите в комментариях или в телеграмм(https://t.me/VA_Ruslan), помогу чем смогу.
Также, если вам требуется дизайн пишите в телеграмм(https://t.me/VA_Ruslan).
