Есть так много разработчиков (не знакомых с компьютерной графикой и иллюстрациями), которые изо всех сил пытаются понять логику создания собственных иллюстраций в инструменте Pose-animator.
Кому следует продолжить чтение этого полного блога?
- Любой разработчик, работающий с Pose-Animator.
- Любой разработчик, которому интересно узнать, что такое Pose-Animator и как он работает.
- Любой разработчик, который хочет, чтобы ваши любимые мультяшные иллюстрации имитировали вас в браузере.
Начнем с того, что в репозитории GitHub есть общее объяснение того, как создавать новые иллюстрации. Но для людей, которым все еще трудно, есть альтернатива.
ДЕЙСТВИЯ:
Взгляните на репозиторий Pose-Animator на Github.
(ссылка: https://github.com/yemount/pose-animator)
- В папке перейдите в Resources=›Illustration=›и загрузите любую из ваших любимых иллюстраций (Допустим, я загружаю файл oy.svg)
- Перейдите на страницу Illustration=›samples=› и загрузите Svg-файл скелета.
- Откройте любой из ваших любимых графических редакторов (Inkscape, CoralDraw, Illustrator и т. д.)
- Откройте файл Boy .svg (вы должны увидеть иллюстрацию мальчика со встроенным в нее файлом скелета).
- Перейдите к опции «Объекты» и обратите внимание на слои в ней. Вы можете видеть, что для любого файла svg, который вы загружаете из репозитория, есть сходство в группировке и наслоении объектов иллюстрации и скелета. Вы можете видеть, что слой 1 имеет группу объектов с именем illustration, поверх которой лежит наша скелетная группа. Итак, наша панель «Объект» должна отображать примерно такую иерархию:
[Layer 1]
|---- skeleton
|---- illustration
|---- path 1
|---- path 2
|---- path 3- Но Pose-Animator работает хорошо, только когда находит два слоя в качестве файловой структуры и не более того. Итак, когда мы добавляем любой новый объект, возникает проблема.
- Таким образом, мы не должны нарушать иерархию, но все же вносить изменения в файл. Мы можем выполнить эту задачу, добавив все пути объектов к слою иллюстрации. Если вы имеете дело с уже векторизованным файлом svg, убедитесь, что вы разгруппировали все объекты векторизованного файла, а затем добавили его в существующий слой иллюстрации.
- После этого удалите все остальные объекты, принадлежащие файлу boy.svg. Если вы редактируете файл Boy .svg без включения каких-либо дополнительных объектов, то не нарушайте иерархию, пусть она будет такой же.
- В качестве последнего шага переместите скелет.svg поверх настоящей иллюстрации так же, как это было при загрузке.
Теперь сохраните иллюстрацию под тем же именем или в новый файл в папке с иллюстрациями, затем откройте демонстрационный сайт Pose-Animator и перетащите файл svg. Ваш файл svg должен появиться в браузере сейчас!
СОВЕТЫ, КОТОРЫЕ МОГУТ ВАМ ПОМОЧЬ:
- Начните с редактирования существующих объектов в файле.
- Создавая новые SVG-иллюстрации, делайте это очень просто. Чем проще слои, тем эффективнее будет работать Pose-аниматор.
- При работе с большим количеством слоев убедитесь, что определенное количество слоев, образующих руку или глаз на вашей иллюстрации, сгруппировано, чтобы слои не выходили за рамки во время анимации.
- Всегда старайтесь сохранить его в другом файле (это минимизирует количество загрузок с Github :P
/////////////////////////
СЧАСТЛИВАЯ АНИМАЦИЯ
////////////////////////
ВДОХНОВЕНИЕ:
Pose Animator — инструмент с открытым исходным кодом для оживления SVG-символов в браузере с помощью захвата движения
