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

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

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

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

Строки кода – 25-30 на листинге ниже отрисовывают кнопку “Start” и присваивают ей уникальное имя id=”startButton”.
строки – 33-40 – внутри команды <line> ….</line> объявляется анимация, которая запускается по команде begin=”startButton.click” и длится “4s”.

4. Цепочка последовательных анимаций изменения координат линии.

Цепочку выполнения друг за другом нескольких анимаций можно организовать следующим образом: должно быть какое-то правило, по условиям которого, вторая по счёту анимация не может начаться раньше окончания первой анимации. Третья анимация не может начаться пока не закончена вторая анимация и т.д.
На схеме ниже показана последовательность прохождения анимаций, которая будет реализована на конкретном примере ниже.
line-changes-the-coordinate2-pic

  1. На схеме чёрная стрелка, идущая к цифре “1” – показывает выполнение первой анимации: изменение конечной координаты линии -“y2” с 170px до 30px. Этой анимации присвоено уникальное имя – animate id=”by2″
  2. Вторая анимация – animate id=”bx2″ – изменение координаты “x2” с 50px до 150px не может начаться пока не закончится первая анимация, за это отвечает команда begin=”by2.end+1s” dur=”3s”
  3. Третья анимация – animate id=”cy2″ – изменение координаты “y2” с 30px до 170px запускается по окончании второй анимации командой – begin=”bx2.end+1s” dur=”3s” и так далее см. листинг ниже.

copy-ctrl – для копирования файла целиком нажать на иконку в шапке листинга ⇩

⇚ Анимация линии часть 1 Анимация линии часть 3 ⇛

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