Кодинг
★ Рубрика: Кодинг
★ Тема: анимация, SVG

Имитация движения человека в Svg

Здесь вы видите имитацию движений человечка, выполняющего серию гимнастических упражнений. Такая анимация может пригодиться для сайта спортивной тематики или для обучения ваших подопечных азам йоги.
За этим человечком можно наблюдать долго. Он повторяем свои упражнения в цикле и, поэтому никогда не устанет. Замечательность этого примера не в этом. Человечек реализован с помощью графики svg. Анимация реализована без применения скриптов, а исключительно на основе средств анимации svg. Такой пример можно считать идеальным заданием для студентов, изучающих компьютерную векторную графику. Показав код примера на лекции и, подробно его разобрав, можно предложить студентам сделать свое упражнение. Можно даже устроить состязание - у кого упражнение получится самым сложным. Или реалистичным. А теперь разберемся как это все реализовано. Для начала, нам понадобится файл стиля, в котором можно менять размеры блока, можно указать границу и отступами положение блока на странице:
.demos svg {
 /* border: 1px solid black; */
 display: block;
 height: 250px;
 width: 250px;
 margin: 100px auto;
 transform: translateY(-50%);
}
А дальше приведем код svg-графики и ее анимации:
Замечание. Более простой пример анимации можно посмотреть здесь.
 Похожие публикации: анимация, SVG

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]