Анімація у SVG

http://snapsvg.io/ - бібліотека для роботи з SVG та анімацією.

Анімувати примітиви можна за допомогою наступних тегів:

<animate> - зміна числових атрибутів (і кольору) протягом певного часу.

<set> - зміна нечислових атрибутів (visible, font-style і т.п.)

<animateMotion> - рух елемента по заданій траекторії.

Додаткові теги:

<animateTransform> - трансформація елемента.

<mpath> - вставляється в тег animateMotion, задає траекторію руху елемента своїм контуром.

<animateMotion path="..."> - модифікація контура.

<animateMotion keypoints="..."> - точки зміни швидкості руху.

<animateMotion rotate="..."> - дозволяє обертати елемент так, щоб він "завжди дивився вперед" по мірі руху по траекторії.

Включення анімації в код можливий двома шляхами (подібно до взаємодії label <==> input):


				<line id="line1" ... />

				<animation xlink:href="#cool_shape" ... />


				<line ... >

				  <animation ... />

				</line>

Атрибути анімації:

attributeName - ім'я атрибута, який будемо міняти.

В одній анімації можна міняти тільки один атрибут. Якщо потрібно міняти декілька атрибутів - створіть декілька анімацій.

attributeType - якщо міняти треба не XML-атрибут, а CSS, такий, як opacity, font-weight і т.п., то потрібно задати attributeType="CSS".

from - початкове значення атрибута.

to - кінцеве значення атрибута.

by - кінцеве відносне значення атрибута.

dur - тривалість анімації, наприклад, dur="3s".

repeatCount - кількість повторів, repeatCount="indefinite" - нескінченна анімація.

begin - подія, по якій повинна початися анімація, наприклад, begin="click", begin="4s" - по кліку і через 4 секунди після завантаження сторінки, begin="click + 2s".

fill - результат анімації: fill="freeze" - залишити елемент зміненим, fill="remove" - повернути елемент до початкового стану.


				<circle cx="50" cy="100" r="70">

					  <animate attributeName="cx" to="100" dur="4s" begin="click" fill="freeze"/>

					  <animate attributeName="cy" by="40" dur="4s" begin="click" fill="freeze"/>

					  <animate attributeName="r" from="50" to="100" dur="4s" begin="click" fill="remove"/>

					  <animate attributeType="CSS" attributeName="opacity" from="1" to="0.3" dur="2s" begin="click + 2s" fill="freeze"/>

				</circle>

Можна задати рух по ключовим кадрам:


				<animate ... values="20; 40; 60" keyTimes="0; 0.3; 1" />

calcMode - атрибут, що задає плавність переходу між точками, calcMode="discrete" - різкий, calcMode="linear" - плавний, є ще значення paced і spline.

keySplines - атрибут, що задає плавність по типу CSS-властивості ease-in = cubic-bezier(0.47, 0, 0.745, 0.715).

Цим атрибутом можна задати наприклад ефект гравітації - стрибаючий гумовий м'ячик.

Атрибути тега animateMotion всі ті самі і ще три додаткових:

keyPoints

rotate - прокручувати елемент по ходу руху, значення: auto, auto-reverse, число - градуси.

path - той самий формат, що і у атрибута <path d="..."/>.

Використання примітиву <path> як траекторія руху об'єкта:


				<animateMotion ... dur="1s" begin="click" fill="freeze">

				  <mpath xlink:href="#motionPath"/>

				</animateMotion>

Текст по заданій траекторії:


				<text>

				  <textpath xlink:href="#textpath">

				    Text laid out along a path.

				  </textpath>

				</text>

Приклад анімації ліній (клікни по колу):


			<svg id="svg1" width="230" height="230" fill="#080a1a">

			  <circle cx="115" cy="115" r="110" fill="rgba(0,0,0,0.2)"

			      stroke="#ff0000" stroke-width="5"

			      stroke-dasharray="1000" stroke-dashoffset="1000">

			    <animate attributeName="stroke-dashoffset" begin="svg1.click"

			        values="1000; 0" dur="5s" repeatCount="1" fill="freeze"

			        calcMode="linear"></animate>

			  </circle>