Масштабируемая векторная графика (SVG) Анимация

Сегодня мы продолжим наше обсуждение масштабируемой векторной графики (SVG), и на этот раз мы будем работать с SVG Animation. Не пугайтесь, SVG Animation относительно проста, и на самом деле в этом посте мы начнем с основ.

Рекомендуемое чтение: взгляд на масштабируемую векторную графику

Основная реализация

Анимация в SVG может быть сделана через элемент;

Как вы можете видеть из фрагмента кода выше, мы добавляем внутри элемента, который будет затронут. это содержит некоторые из следующих атрибутов;

attributeName: этот атрибут указывает, какой атрибут элемента будет затронут в анимации.

from: Этот атрибут является необязательным, мы можем указать точное значение или оставить его, чтобы оно начиналось с того места, где оно было.

to: Этот атрибут указывает направление анимации. В зависимости от указанного значения в attributeName результаты могут отличаться. Но в этом примере это увеличит высоту.

dur: этот атрибут определяет продолжительность анимации. Значение этого атрибута выражается в Синтаксис тактового значения, Например, 02:33 представляет 2 минуты и 33 секунды, в то время как 3 часа равны 3 часам, но нам не нужно такое длинное время, поэтому мы указали продолжительность всего 3 секунды или 3 секунды;

То же самое относится и к элемент, но на этот раз мы нацелены на атрибут радиуса круга (r).

Движущийся элемент

При перемещении элементов SVG нам нужно только нацелить координаты элемента x и y;

В приведенном выше примере мы перемещаем прямоугольник от 0 до 200 за 3 секунды, при этом прямоугольник будет двигаться горизонтально слева направо. Кроме того, если вы посмотрите внимательно, мы также добавили еще один атрибут элемент, а именно заполнить.

Атрибут fill здесь не имеет ничего общего с цветом фона, как в других элементах SVG. Этот атрибут определяет, как будет действовать анимация после окончания продолжительности. В этом примере мы замораживаем затронутый элемент, чтобы он оставался там, где заканчивается анимация.

Это также работает аналогично элемент, мы можем использовать cx или cy, вот так:

Анимация нескольких атрибутов

До сих пор мы предназначались для анимации только одного атрибута, но также возможно анимировать более одного атрибута одновременно. Пример ниже показывает, как мы это делаем:

Как видите, работает аналогично, только теперь у нас есть два элементы внутри нацеливаться на радиус и ширину хода, которые будут затронуты.

По пути

В нашем предыдущем посте «Работа с текстом в SVG» мы показали, как передать текст в путь. Также можно сделать то же самое в SVG Animation, мы можем анимировать элемент, чтобы следовать по пути. Вот пример.

Путь лучше определен в элемент, как показано выше. Чтобы элемент следовал по пути, нам нужно определить анимацию с и связать идентификатор пути с элемент, как следует;

Вот и все, теперь давайте посмотрим на это в действии;

Трансформации

Мы также можем использовать преобразования, такие как масштабирование, перевод и вращение для анимации, и для этого мы будем использовать ;

Преобразования в SVG имеют те же принципы, что и CSS3, и об этом мы подробно рассказали в нашем предыдущем посте о CSS3 2D Transformation.

Последние мысли

В зависимости от вашего мастерства в SVG Animation вы можете создать что-то как это,

Одним из преимуществ использования SVG Animation над Flash Animation является то, что он не зависит от работы сторонних плагинов, а также значительно быстрее, чем Flash. После того, как Adobe прекратила поддержку Flash в Android, вы можете попробовать этот подход для показа анимации на следующем веб-сайте.
Дальнейшие ссылки