Анимация линии SVG

Хочу начать с самого простого и надежного вида анимации, которая корректно отображается почти во всех браузерах, даже в IE6 🙂
это – “animateTransform attributeName=”transform” type=”rotate” – поворот объекта на заданный угол вокруг точки.

Первое число в параметре from=”0 100 100″ to=”360 100 100″ в команде “rotate” это градусы, на который будет повернут объект. Положительное значение повернёт объект по часовой стрелке, отрицательное – против часовой стрелки. Вторые и третьи числа это координаты точки, относительно которой будет произведен поворот.


Для вращения стрелки на полный оборот необходимо изменять угол с “0” до “360” градусов. И еще нужно найти центр относительно, которого будет вращаться стрелка, в нашем случае при размерах рабочей области 200×200 px это – (100,100). Для простоты я совместил центр квадрата и центр линии. На практике нужно искать центр линии.

В листинге выше, 4 строка кода – это команда начать анимацию при наведении мышки на объект startButton В качестве объекта, запускающего анимацию, может быть любая фигура документа SVG, в том числе и кнопка, которой нужно присвоить уникальное имя в параметре id =”..” Следующий параметр: dur=”4s” – длительность одного цикла анимации в секундах.
5 строка – указывает, что будет два цикла (два оборота стрелки) за 4 сек. каждый. Параметр restart=”whenNotActive” – запрещает новый запуск пока анимация не закончится.

1. Вращение по часовой стрелке после наведения курсора мышки на кнопку “Start”


Строки 27-31 листинга ниже создают кнопку “Start” (id=”startButton”).
Строки 36-42 реализуют анимацию – поворот стрелки на два оборота.
Строки 45-50 отвечают за отрисовку 3-х линий формирующих стрелку.
Остальной код – графическое оформление.

2. Вращение по часовой стрелке с разной скоростью в зависимости от выбора кнопки.

Анимация запускается после клика по любой кнопке.
Кнопка “Х1” – первая скорость, которая задается параметром dur=”4s”

“Х2” – вторая скорость задается dur=”2s”
“Х4” – третья скорость задается dur=”0.5s”
Видна сразу зависимость, – чем короче цикл, заданный параметром “dur”, тем выше скорость.
Идея, как реализовать этот алгоритм состоит в следующем: каждой кнопке присваивается уникальное имя id=”startButtonNN” строки листинга ниже: 30, 35,40.

Объект анимации – два круга и несколько линий, образующих стрелку, заворачиваются в группу <g> см. строки 69-87 </g>

Внутри этой группы начинается анимация по команде от клика по кнопке
begin=”startButton.click” dur=”4s”. Далее эта группа заворачивается во вторую группу и затем обе группы входят в третью группу. Внутри каждой группы своя анимация со своим значением длительности цикла. Начало работы каждой анимации инициируется каждой своей привязанной по уникальному имениid=”..” кнопкой. Таким образом каждая кнопка вызывает свою анимацию со своим значением длительности цикла, а следовательно и скоростью вращения стрелки.

⇚ Анимация маркера Анимация линии часть 2 ⇛

Добавить комментарий