2. A anima înseamnă literal „a da viață”; animarea
reprezintînd mișcarea unui obiect sau corp
(sau impresia că ceva este în mișcare), care
nu se poate mișca de la sine.
2
3. • Primele încercări de a capta mișcarea în
imagini se regăsesc în picturile rupestre din
paleolitic, unde animalele erau prezentate cu
mai multe picioare, care se suprapuneau
reciproc
3
4. • Prima menționare a unor astfel de dispozitive
se face în secolul al doilea, cînd a fost inventat
în China zoetropul (aproximativ 180 d.Hr.,
inventator - Ding Huan).
4
5. Metode de bază în animație
• Metodele de animație computerizată se
împart în metode bazate pe animație
procedurală și metode bazate pe utilizarea de
keyframes
5
6. Animația procedurală
Create CLOCK(…);
For FRAME:=1 to NB_FRAMES
TIME := TIME + 1/24;
ANGLE := A * SIN(OMEGA*TIME + PHI);
MODIFY(CLOCK, ANGLE);
draw CLOCK;
record CLOCK;
erase CLOCK;
6
7. Animația bazată pe utilizarea
keyframe-urilor.
• În cadrele, care nu sunt keyframe-uri, valorile
parametrilor se obțin prin interpolarea
valorilor în keyframe-uri.
7
8. În baza caracteristicilor specifice ale
problemei, se iau în considerare
următoarele aspecte:
• Se face alegerea între interpolare și
aproximare;
• Complexitatea;
• Continuitate;
• Gestionarea globală sau locală.
8
9. Animația elementelor WEB poate fi
realizată prin:
• CSS3;
• JavaScript;
• Biblioteci și framework-uri specializate (de ex.
jQuery);
• Alte instrumete : Adobe Adge Animation,
Google Design etc.
9
10. Efecte de animație în CSS3 pot fi
căpătate prin utilizarea:
• Transition
• Transform
• Animation
10
11. Principii de creare a animațiilor cu
ajutorul CSS3 - animation;
1. Se indică o serie de reguli @keyframes
2. Se specifică identificatorul animației animation-name
3. Se specifică durata animation-duration
4. Se indică forma de desfășrare a animației animation-timing-function
5. Se determină punctele de sptopare a animației animation-delay
6. Animația poate fi repetată animation-iteration-count
7. Animația poate orientată animation-direction
9. Animația poate fi controlată din extern cu ajutorul limbajelor de
programare animation-play-state
10. Poate fi realizat controlul stării animației pînă la început și respectiv sfîrșitul
animației animation-fill-mode
11. Unui obiect i se pot determina mai multe animații în acelaș timp
11
14. Principii de creare a animațiilor cu
ajutorul JavaScript;
• Animația este realizată prin
apelul requestAnimationFrame.
• În cazul utilzării IE9- e nevoie de conectat
profilul ce va utiliza setTimeout.
• La fel poate fi utilizată constructorul
setInterval.
14
15. Parametrii de bază sunt:
duration — durata animației în ms.
timing — funcția ce determină crearea animației
în fiecare frame. Această primește partea de
timp destinată animație de la 0 la 1, întoarce
nivelul de finalizare a animației de la 0 la 1.
draw — funcție ce crează conținutul animat și
scpecifică starea de la 0 la 1.
15
16. var step = function(){
// content ce se reașizează
} setInterval(step, 100); // 0.1s pentru repetare
/* Sau in alta forma */
var step = function(){
setTimeout(step, 100);
} step();
16
18. Neajunsuri tipice
• Necesitatea sincronizarii intre diverse
conținuturi animate;
• Încărcarea excesivă a fps necontrolat;
• Dezacordul în cazul unui conținut suprasaturat
cu grafică generată
• ...
18
19. Soluția - requestAnimationFrame
function step() {
requestAnimationFrame(step);
// descrierea unui pas
} step();
/* acesta poate avea paratru elementulul
modificat*/
requestAnimationFrame(step, element);
19
20. Neajunsuri
Tipul browserulului în dependență de versiune
• webkitRequestAnimationFrame
• mozRequestAnimationFrame
• msRequestAnimationFrame
20
25. Principii de creare a animațiilor cu
ajutorul jQuery;
• Pe crează effecte particularizate cu ajutoul
metodei .animate();
• Pot fi utilizate efectele din colecția mare de
efecte predefinite jQuery;
• Afectele pot fi controlate în timp după
prioritate și conțitun;
• Animația poate fi controlată și de proprietățile
obiectelor jQuery
25
26. Concluzii
• Animația computerizată s-a început cu metode
simple, venite din animația tradițională și s-a axat
preponderent pe interpolarea keyframe-urilor.
• Apoi au apărut modelele chinematice și dinamice
de reprezentare structurală a obiectelor. Cu
timpul metodele de animație computerizată s-au
orientat tot mai mult asupra respectării tot mai
stricte a legilor fizicii și modele dinamice.
26
27. Concluzii
• În dependență de gradul de complexitate și
disponibilități funcționale animațiile pot fi
realizate cu ajutorul:
1. Animații cu un grad slab de complexitate și
incluziune – CSS3;
2. Animații ce nu pot fi realizate cu CSS3, de obicei
cu un rendering variabil în timp sau cu controlul
complex al obiectelor – JavaScript;
27
28. 3. Animații însoțite de efecte speciale complexe cu un
variabil avantaj de realizare, cu forme de descriere
cu mulți parametri – biblioteci JavaScript specializate
(de ex. Paper.js) sau chiar framework-uri de genul
jQuery, AngularJs, ReactJs etc.
4. Animații foarte complicate, ce necesită interactivități
complexe, decrierea transformărilor parametrizate,
măști de animație, simboluri de obiecte multinivel –
Adobe Adge Animation, Google Design, Flash etc.
28
29. Controlul animației interactive
1. Prototipare si control de elemente
https://www.youtube.com/watch?v=_t-
6FuQ7m_Y&list=PLf0k8CBUad-
sHxpoBHLHIr3CwWfSmOYZR&index=8
2. Controlul tastelor
https://www.youtube.com/watch?v=iDi4PvmVzc
8&list=PLf0k8CBUad-
sHxpoBHLHIr3CwWfSmOYZR&index=5
29
30. Controlul animației interactive
3. Drag And Drop
https://www.youtube.com/watch?v=_ycJAn_4St
U&list=PLf0k8CBUad-
sHxpoBHLHIr3CwWfSmOYZR&index=9
4. Utilizarea sprite images
30
