Анимация персонажа улитки
1,00
р.
У меня есть, вот такая картинка симпатичного семейства улиток - 🐌
Хочется сделать анимацию движения улиток, плюс к этому анимацию тела улитки, её усиков, глаз. Понятно, что нужно искать или рисовать улитку в формате svg. В инете достаточно много файлов svg с улитками. Но мне понравилась именно эта картинка.
Если есть svg файл большой улитки, то сделать уменьшенные копии - детёнышей не составит труда, используя команду scale(0.25):
`
Анимация перемещения вдоль пути может быть реализована командой:
Как сделать остальную анимацию частей тела улиток?
Ответ
Анимация подошвы улитки
Если есть необходимость подробно разобраться с техникой анимации атрибута "d" команды Path смотрите здесь Вся последующая реализация анимаций частей тела улитки основана именно на этой технике.
Чтобы анимировать тело улитки необходимо найти патч, который рисует внешний контур подошвы улитки. Загружаем файл в векторный редактор и делаем копию этого path. Сдвигаем контрольные узлы на копии path, чтобы имитировать изменение контура подошвы улитки. Сохраняем файл и копируем эти патчи. Чтобы получилась анимация необходимо сделать плавный переход от первоначального path ко второму и обратно. Для этого надо использовать анимацию атрибута path “d”
Первая формула path расположена в атрибуте values=”m271….. m271….” до первой точки с запятой, вторая формула до второй точки с запятой, затем снова возврат к исходному path и так по кругу, создавая иллюзию волнообразного изменения формы подошвы улитки. За повторяемость циклов отвечает команда repeatCount=”indefinite”
Ниже пример этой анимации
.s0{ stop-color:#3d280a stop-opacity:0 } .s1{ fill:#977640 stroke:#000 } .s2{ fill:#fff stroke-width:6 stroke:#000 } .s3{ fill:#000 stroke-width:8 stroke:#000 }
Анимация глаз и рта улитки
Глаза улитки прикреплены к усикам, которые движутся, поэтому для более реалистичной картины необходимо обеспечить движение глаз влево-вправо и вверх-вниз. Для этого используется команда :
Анимация рта улитки реализуется плавным изменением параметра “d” path. Другими словами верхняя губа изгибается, имитируя открывание рта, а затем смыкается с нижней губой, как-бы, закрывая рот.
.s0{ stop-color:#3d280a stop-opacity:0 } .s1{ fill:#977640 stroke:#000 } .s2{ fill:#fff stroke-width:6 stroke:#000 } .s3{ fill:#000 stroke-width:8 stroke:#000 }
Создание маленьких улиток
Для создания детенышей улиток будем использовать команду для клонирования и команду scale(0.25) для уменьшения
Анимация движения улиток
Для анимации движения улиток используется команда движение по заданному пути
Далее оформляем ландшафт, добавляем градиенты и музыку для создания настроения.
Update 19.03.2019 г.
Chrome теперь не позволяет автоматически запускать файлы *.mp3, поэтому пришлось добавить аудиоплэйер. Firefox воспроизводит в автоматическом режиме файлы *.mp3 Добавлена анимация глаз улитки Добавлена анимация солнечных лучей
.container { width:90% height:90% }
Использована песня: Bobby McFerrin don't worry be happy
Хочется сделать анимацию движения улиток, плюс к этому анимацию тела улитки, её усиков, глаз. Понятно, что нужно искать или рисовать улитку в формате svg. В инете достаточно много файлов svg с улитками. Но мне понравилась именно эта картинка.
Если есть svg файл большой улитки, то сделать уменьшенные копии - детёнышей не составит труда, используя команду scale(0.25):
`
Анимация перемещения вдоль пути может быть реализована командой:
Как сделать остальную анимацию частей тела улиток?
Ответ
Анимация подошвы улитки
Если есть необходимость подробно разобраться с техникой анимации атрибута "d" команды Path смотрите здесь Вся последующая реализация анимаций частей тела улитки основана именно на этой технике.
Чтобы анимировать тело улитки необходимо найти патч, который рисует внешний контур подошвы улитки. Загружаем файл в векторный редактор и делаем копию этого path. Сдвигаем контрольные узлы на копии path, чтобы имитировать изменение контура подошвы улитки. Сохраняем файл и копируем эти патчи. Чтобы получилась анимация необходимо сделать плавный переход от первоначального path ко второму и обратно. Для этого надо использовать анимацию атрибута path “d”
Первая формула path расположена в атрибуте values=”m271….. m271….” до первой точки с запятой, вторая формула до второй точки с запятой, затем снова возврат к исходному path и так по кругу, создавая иллюзию волнообразного изменения формы подошвы улитки. За повторяемость циклов отвечает команда repeatCount=”indefinite”
Ниже пример этой анимации
.s0{ stop-color:#3d280a stop-opacity:0 } .s1{ fill:#977640 stroke:#000 } .s2{ fill:#fff stroke-width:6 stroke:#000 } .s3{ fill:#000 stroke-width:8 stroke:#000 }
Анимация глаз и рта улитки
Глаза улитки прикреплены к усикам, которые движутся, поэтому для более реалистичной картины необходимо обеспечить движение глаз влево-вправо и вверх-вниз. Для этого используется команда :
Анимация рта улитки реализуется плавным изменением параметра “d” path. Другими словами верхняя губа изгибается, имитируя открывание рта, а затем смыкается с нижней губой, как-бы, закрывая рот.
.s0{ stop-color:#3d280a stop-opacity:0 } .s1{ fill:#977640 stroke:#000 } .s2{ fill:#fff stroke-width:6 stroke:#000 } .s3{ fill:#000 stroke-width:8 stroke:#000 }
Создание маленьких улиток
Для создания детенышей улиток будем использовать команду для клонирования и команду scale(0.25) для уменьшения
Анимация движения улиток
Для анимации движения улиток используется команда движение по заданному пути
Далее оформляем ландшафт, добавляем градиенты и музыку для создания настроения.
Update 19.03.2019 г.
Chrome теперь не позволяет автоматически запускать файлы *.mp3, поэтому пришлось добавить аудиоплэйер. Firefox воспроизводит в автоматическом режиме файлы *.mp3 Добавлена анимация глаз улитки Добавлена анимация солнечных лучей
.container { width:90% height:90% }
.s0{stop-color:#3d280a stop-opacity:0 } .s1{fill:#977640 stroke:#000 } .s2{fill:#fff stroke-width:6 stroke:#000 } .s3{fill:#000 stroke-width:8 stroke:#000 } <!-- Анимация солнца --> <!-- масштабирование улитки --> <!-- Трава по которой ползет улитка --> <!-- Анимация подошвы улитки --> <!-- Анимация глаз улитки --> <!-- Анимация рта улитки --> <!-- Анимация движения улиток -->
Использована песня: Bobby McFerrin don't worry be happy
