Взгляд в масштабируемую векторную графику (SVG) Анимация

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

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

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

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

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

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

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

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

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

• Демонстрация базовой реализации

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

При перемещении элементов SVG нам нужно только нацелить координату элемента Икс а также Y;

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

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

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

• Движущийся Элемент Демо

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

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

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

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

По пути

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

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

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

• По следу Демо

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

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

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

• Трансформация Демо

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

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

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

Дальнейшие ссылки

• SVG Animate Документация
• Продвинутые SVG анимационные техники

• Посмотреть демо
• Скачать исходный код