Анимация многоугольников

  1. Вращение пятиугольника
  2. Увеличение размеров пятиугольника
  3. Увеличение размеров с одновременным вращением фигуры
  4. Скачать примеры анимации

Продолжить чтение

Добавление звука к SVG файлам

Задача – добавить звук к существующей анимации, то есть к кнопкам запуска и остановки гоночных машинок привязать включение и отключения звука гоночных моторов.
racing car sound of racing motors

Продолжить чтение

Анимация SVG path – гонки автомобилей

На этом примере анимации – движение гоночных машинок вдоль пути “path”, разбирается параметр “animateMotion”, который управляет направлением, началом, продолжительностью и окончанием движения.
race cars

Продолжить чтение

Анимация линии SVG часть 2

3. Анимация линии посредством изменения её координат.

В этой части статьи будем эксперементировать с анимацией координат точек линии.
Команда на отрисовку линии: <line x1=”100″ y1=”170″ x2=”100″ y2=”30″/>

Для наглядности будем изменять только одну конечную координату линии “y2”, изменяя её значение с 30px до 170px.
Запуск анимации осуществляется кнопкой “Start”. Защитой от повторного запуска во время анимации служит команда – restart=”whenNotActive”
Анимация продолжается два цикла – repeatCount=”2″
Продолжить чтение

Примеры анимации маркеров

1.В первом примере показывается влияние атрибута markerUnits на габаритные размеры самого маркера в зависимости от толщины (stroke-width) линии, к которой он присоединен. Если атрибут маркера установлен в значение: markerUnits=”strokeWidth”, то при увеличении толщины линии пропорционально увеличиваются габаритные размеры маркера.

Обратите внимание, что у второго маркера, который выполнен в виде красного круга, габаритные размеры не увеличиваются, так как для него установлено значение атрибута markerUnits=”userSpaceOnUse” (см. строку 28) в листинге ниже. Важно помнить об этом, так как значение markerUnits по умолчанию равно “strokeWidth”.
Продолжить чтение

Анимация