Китайские мотивы, анимация лодки на реке
В этом уроке анимации в synfig studio мы нарисуем пейзаж в стиле китайской живописи и анимируем движение лодки по реке.
Анимация движения лодки по реке
Запустите редактор synfig studio и приступаем к работе.
Шаг 1. Настройки холста
Переходим в настройки холста Холст- свойства F8 и изменяем размер на 900 на 500 рх.
Лодка будет двигаться плавно, поэтому время движения необходимо увеличить. В закладке Время установите время анимации 1 мин.
Шаг 2. Рисуем лодку и человека.
Выбираем инструмент рисования прямоугольников R и растягиваем прямоугольник размером в созданный документ. Цвет заливки EAEAEA. Основной цвет работы- оттенки серого. Таким нехитрым способом мы изобразили и реку и туман.
Созданный слой (с созданием прямоугольника автоматически на панели слоев появляется слой с этим объектом) называем понятным образом, например, Фон.
Переходим к лодке. С помощью кривых B создаем контур, напоминающий лодку. Достаточно использовать четыре узла.
После создания контура удалите слой с обводкой (он называется Новая кривая НОМЕР контур). Для заливки установите цвет 313131. Добавьте созданный контур в группу с именем Лодка.
Давайте добавим отражение лодки. Создайте копию группы Лодка и отразите его по горизонтали. Для этого потяните за желтую управляющую точку на вертикальном рычаге вниз. Затем измените цвет отражения лодки на 777777. Группу с отражением лодки переименуйте на Отражение лодки
Лодкой будет управлять старенький китаец. Его мы нарисуем очень условно. Я для этого круг E и три контура, построенных с помощью кривых B . Контур в виде треугольника это шляпа и два контура в виде трапеций- туловище и ноги.
Еще один контур (более толстый) это рука и прямой контур- шест. Руку и шест необходимо поместить в отдельную группу Рука и весло— ее мы анимируем. Все остальное в группу Человек. Выделяем все созданные группы и помещаем их в группу Лодка
В итоге имеем такой набор групп слоев. Конечно, вы можете по своему организовать слои.
Шаг 3. Рисуем берега реки
Начнем с ближнего берега. С помощью кривых В нарисуйте произвольный контур справа, где китаец на лодке. Лодка должна будет появляться из-за берега, поэтому разместите берег выше лодки. В качестве заливки используйте линейный градиент. Для нижней точки установите цвет заливки как у фона.
Аналогичным способом рисуем еще один берег реки , но уже с левой стороны.
Третий берег расположен дальше всех и находится справа.
Далее кривыми перед каждым берегом рисуем облака тумана и применяем размытие. Цвет заливки тумана должен отличаться от цвета берега. Степень размытия подберите самостоятельно.
Ищем в сети небольшое фото ветки дерева с красными листьями, желательно на прозрачном фоне и импортируем в работу Файл- импортировать. Ветку разместите слева и вверху иллюстрации. Ее мы заставим немного двигаться.
После создания градиентной заливки и размытия у вас должны быть такие группы
После создания всех необходимых объектов иллюстрации у меня получилась такая картина на панели слоев.
Шаг 4. Анимация движения лодки
Переключаемся в режим анимации- жмем на зеленого человечка и он становится красным.
Для группы слоев Лодка необходимо зафиксировать начальное положение- момент времени 0 с (крайнее правое положение, где мы его нарисовали) и, нажав мышкой на панели времени в момент 60 с, конечное положение. В конечном положении сдвигаем группу Лодка в крайнее правое положение за зеленую управляющую точку. На шкале времени появятся два фиксатора.
В процессе движения лодки человек с помощью шеста (весла) заставляет двигаться лодку, при этом, рука с веслом совершает вращательное движение. Заходим в группу Лодка и выбираем группу Рука и весло. Через каждые 2-3 секунды необходимо изменять значение параметра Угол. Нажимаем на серую управляющую точку и переносим центр в верхнюю часть плеча. Там будет происходить вращение. Далее выбираем синюю управляющую точку и в панели параметров меняем значение угла +15 … -30 …+15 … -30 и так до 60 секунды. На шкале времени появятся соответствующие фиксаторы.
Туман медленно двигается по реке, его анимируем аналогично лодке. В момент времени 60 секунд смещаем облако тумана (за зеленую управляющую точку) в нужное место. Так поступаем с каждым облаком тумана.
Осталось анимировать ветку дерева. Сначала переместите рычаги трансформации в левый верхний угол ветки. Там будет центр поворота. Их можно переместить за серую управляющую точку. Теперь поступаем как с рукой и веслом. Меняем значение Угол через каждые 7-10 секунд.
Значения угла должны отличаться на 5. Например, 0 … -5 … 0 … -5 и до 60 секунды
Нажмите воспроизведение и посмотрите что у вас получилось. При необходимости внесите изменения. Если вас все устраивает, то проведите визуализацию Файл- Визуализация. У меня получилась вот такой короткий ролик с наложенной музыкой
Конечно, можно добавить падающие листики с ветки дерева, да мало ли еще что. Но это совсем другая история. Дерзайте.