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

Прыгающий человечек в SVG

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

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