SVG - Animaţii declarative

Imaginile SVG, spre deosebire de imaginile rastru, permit modificarea graficii vectoriale în timp, atât la momente predefinite de timp şi după reguli predefinite, în animaţii, dar şi ca rezultat al interacţiunii utilizatorului, la anumite evenimente. Conţinutul SVG poate fi modificat astfel:

Animaţii descriptive

Elementele folosite în animaţii:

  • animate — element general de specificare a animaţiilor
  • set — modificări bruşte ale proprietăţilor
  • animateMotion — mutarea unui element pe un drum predefinit
  • animateColor — folosit pentru animarea culorii
  • animateTransform — modificarea proprietăţilor de transformare: translate, rotate, scale, skewX sau skewY

Obiectul pentru care se aplică o animaţie este fie părintele elementului de animaţie, fie indicat prin atributul xlink:href. Atributul sau proprietatea CSS animate sunt identificate prin attributeName.

Orice animaţie este definită de proprietăţi temporale (de sincronizare): timpul inceperii unei animaţii, durata minimă, maximă sau totală, numărul de repetări, etc.

  • begin — când începe animaţia – sincronizarea momentului de începere
  • end — când se termină animaţia – sincronizarea momentului de terminare
  • dur — durata totală
  • min — durata minimă
  • max — durata maximă
  • restart — regula pentru repornirea animaţiei: always, whenNotActive, never
  • repeatCount — numărul de repetări: număr întreg sau indefinite
  • repeatDur — durata repetiţiilor
  • fill — ce se întâmplă la sfârşitul animaţiei: freeze sau remove

Sincronizările se pot face fie cu momente de timp (relative la momentul de încărcare a documentului), fie relativ la alte evenimente (begin="click" – click pe elementul animat, begin="element2.mouseout" – ieşirea de pe elementul cu id-ul element2), fie relativ la alte animaţii (begin="anim4.end" – imediat după terminarea animaţiei cu id-ul anim4). Se pot introduce şi intervale de timp la un eveniment de sincronizare: end="click+2s" – la două secunde după click. Pot fi precizate mai multe posibile puncte de sincronizare, separate prin ";": begin="click ; 10s ; mousedown".

Precizarea valorilor animaţiei se poate face cu ajutorul atributelor:

  • from — valoarea de start
  • to — valoarea de sfârşit
  • by — cu cât se modifică valoarea de start (deplasament)
  • values — listă de valori prin care trebuie să treacă atributul animat

În funcţie de ce atribute au fost specificate, animaţiile pot fi împărţite în următoarele categorii:

  • Animaţie from–to: de la o valoare către alta
  • Animaţie from–by: de la o valoare cu o deviaţie
  • Animaţie to: de la valoarea curentă către o valoare precizată
  • Animaţie by: de la valoarea curentă cu o deviaţie precizată

Metoda de interpolare a valorilor este precizată prin atributul calcMode, care poate lua valorile:

  • discrete — animaţia va sări de la o valoare la alta
  • linear — interpolare liniară
  • paced — viteză constantă de animare
  • spline — animaţie definită de o funcţie temporală cu aspect de curbă spline compusă din curbe Bézier cubică. Punctele ce definesc aceste curbe sunt precizate în atributul keySplines, iar momentele de timp sunt definite în atributul keyTimes

Exemplu:

Mai multe animaţii se pot aplica aceluiaţi element. În cazul în care se animează acelaşi atribut de mai multe ori, felul în care se combină animaţiile e definit de atributele:

  • additive — animaţia curentă se adaugă la celelalte animaţii (sum) sau înlocuieşte complet efectul celorlalte animaţii (replace)
  • accumulate — repetiţiile animaţiei curente vor avea un efect cumulat (sum) sau vor porni de la aceeaşi valoare (none)

Un exemplu de utilizare a animaţiilor (luat de pe W3C):

Inclusiv elementele path pot fi animate. Singura restricţie este că elementul animat trebuie să fie compus din exact aceeaşi secvenţă de comenzi (dar cu parametri diferiţi).

Exerciţii

  • Modificaţi animaţia semnelor de carte astfel încât să cuprindă şi cupa.
  • Creaţi o animaţie ce constă în căutarea drumului într-un labirint de către un şoricel. Nu este nevoie de căutare inteligentă, ci de o animaţie predefinită.
  • Creaţi o animaţie pentru butonul vostru.