Погляд у масштабовану векторну графіку (SVG) Анімація

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

Базова реалізація

Анімацію в SVG можна здійснити за допомогою елемент;

Як видно з фрагмента коду вище, ми додаємо всередині елемент, на який впливає. Це містить деякі з наступних атрибутів;

attributeName: Цей атрибут визначає, який атрибут елемента буде впливати на анімацію.

від: Цей атрибут є необов'язковим, ми можемо вказати точне значення або залишити його, щоб він почав звідки він був.

до: Цей атрибут визначає напрямок анімації. Залежно від заданого значення в attributeName, результати можуть відрізнятися. Але в цьому прикладі він розшириться висота.

dur: Цей атрибут визначає тривалість анімації. Значення цього атрибута виражається в синтаксисі Clock Value. Наприклад, 02:33 являє собою 2 хвилини і 33 секунди, поки 3h дорівнює 3 годинам, але нам не потрібно так довго, тому ми вказали тривалість просто 3s або 3 секунди;

Те ж саме йде елемент, але цього разу ми націлюємо атрибут радіусу кола (r).

• Основна демонстрація виконання

Рухомий елемент

При переміщенні елементів SVG потрібно лише націлити координати елемента x і y;

У наведеному вище прикладі ми переміщуємо прямокутник з 0 до 200 через 3 секунди, прямокутник з'явиться рухаючись горизонтально зліва вправо. Крім того, якщо ви уважно подивитеся, ми додали ще один атрибут до елемент, а саме заповнити.

заповнити атрибут тут не має нічого спільного з кольором тла, як у інших елементах SVG. Цей атрибут визначає, як буде діяти анімація після закінчення тривалості. У цьому прикладі ми заморозити пошкоджений елемент, щоб він залишався там, де закінчується анімація.

Він також працює так само, як і ми можемо використовувати cx або cy, так:

• Демонстрація рухомого елемента

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

До цих пір ми націлюємо лише один атрибут, який буде анімований, але також можна анімувати більше одного атрибута одночасно. Наведений нижче приклад показує, як ми це робимо:

Як бачите, він працює подібним чином, тільки зараз у нас є два елементи всередині для націлювання на радіус і ширина ходу бути ураженими.

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

Слідом за Шляхом

У нашому попередньому пості на Робота з текстом у SVG, ми показали вам, як переносити текст на контур. Також можна зробити те ж саме в Анімація SVG, ми можемо анімувати елемент, щоб наслідувати Шлях. Ось приклад.

Шлях краще визначений в межах a елемент, як показано вище. Для того, щоб елемент слідував за Шляхом, нам необхідно визначити анімацію за допомогою і пов'язати шлях id с елемент, наступним чином;

Ось так, тепер давайте побачимо це в дії;

• Наступна демонстрація шляху

Перетворення

Ми також можемо використовувати трансформацію подібно масштабу, перекласти і повернути для Анімації, і робити це ми будемо використовувати ;

Трансформації в SVG поділяють подібні принципи з CSS3, і ми про це висвітлювали досить повно в попередньому повідомленні про CSS3 2D Transformation.

• Демо-трансформація

Заключні думки

Залежно від вашого володіння SVG Animation ви можете створити щось подібне.

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

Подальші посилання

• SVG Animate Documentation
• Розширені методи анімації SVG

• Переглянути демонстрацію
• Завантажити джерело