Создаём lottie preloader в synfig studio
Preloader- это небольшая анимация, которая показывает процесс загрузки основного контента. Мы попробуем сделать его в synfig studio.
Lottie preloader в synfig studio
Preloader может быть выполнен различными способами, например, gif анимация, svg анимация или, как мы это попробуем реализовать, lottie анимация.
Рисуем пальцы
В нашем случае анимация будет заключаться в постукивании пальцами по столу. Нетерпеливый пользователь ждет загрузки контента. Нарисовать потребуется только два пальца. Большой палец (он будет отставлен в строну от ладони) и указательный. Остальные три получим копией указательного.
Выбираем инструмент кривые В и рисуем указательный палец. Основной контур получаем так. Ставим четыре узла в углах прямоугольника, а затем тянем верхнюю и нижнюю сторону прямоугольника до формы полукруга. Аналогичным образом рисуем ноготь и проводим короткую линию в верхней части, это складка кожи. Контуры черные, области белые. Выделяем все три объекта и добавляем в группу палец 2 (первым будет большой).
А вот так рисуем большой палец. Для него потребуются два контура, оба рисуем кривыми.
Далее создаем копию указательного пальца и меняем размер пальцев. У среднего пальца самый большой размер, а далее по убыванию Системы управляющих точек каждого пальца переместите в центр пальца. Размер меняем с помощью коричневой управляющей точки масштаба. Вот такая ладонь у меня получилась.
Анимация ладони для preloader
Всем знакомо постукивание пальцами по столу. Большинство начинает с мизинца, а мы не как все, мы начнем с указательного да еще и большой подключим.
Вот так, например

Понятно, что дело в подборе времени поднятия и опускания пальца и времени начала движения следующего пальца. Обычно пальцами мы стучим быстрее, а вот для preloader в самый раз. Итак
Большой палец 0-5-8, означает, что с 0 по 10 кадр поднимаем палец, а с 6 по 10 опускаем. Аналогично для других пальцев:
- Указательный с 0 по 5 неподвижен, далее 5-10-13
- Средний с 0 по 11 неподвижен, далее 10-15-19
- Безымянный с 0 по 14 неподвижен, далее 16-21-24
- Мизинец с 0 по 19 неподвижен, далее 21-24-26
Коротенькое видео по анимации.
Кнопка развернуть на весь экран справа вверху, маааленькая такая