7. animatii
TRANSCRIPT
Animații ca entitate multimedia
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.
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
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).
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
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;
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.
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ă.
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.
10
Efecte de animație în CSS3 pot fi căpătate prin utilizarea:
• Transition• Transform• Animation
11
Principii de creare a animațiilor cu ajutorul CSS3 - animation;
1. Se indică o serie de reguli @keyframes2. Se specifică identificatorul animației animation-name3. Se specifică durata animation-duration4. Se indică forma de desfășrare a animației animation-timing-function5. Se determină punctele de sptopare a animației animation-delay6. Animația poate fi repetată animation-iteration-count7. Animația poate orientată animation-direction9. Animația poate fi controlată din extern cu ajutorul limbajelor de
programare animation-play-state10. Poate fi realizat controlul stării animației pînă la început și respectiv sfîrșitul
animației animation-fill-mode11. Unui obiect i se pot determina mai multe animații în acelaș timp
12
Descrierea efectivă animației CSShttps://www.youtube.com/watch?v=5Yzkz9xknQU&index=29&list=PLAKxGhxbBWw_jeD7pBLK8-V_ehxGgy11Z
https://html5book.ru/css3-animation/
https://www.youtube.com/watch?v=OmlHKURlvhg&list=PLAKxGhxbBWw_jeD7pBLK8-V_ehxGgy11Z&index=27
https://www.youtube.com/watch?v=QKRmRpq5CQc&list=PLAKxGhxbBWw_jeD7pBLK8-V_ehxGgy11Z&index=25
13
Instrumente pentru generarea animațiilor CSS
• Animate.css• Effect.css• CSS3 Animation Cheat Sheet
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.
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.
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();
17
Calculul FPS
de exemplu:
1000ms / 60(fps) = 16.7ms
Chrome face pentru
setInterval și setTimeout - 1fps
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ă• ...
19
Soluția - requestAnimationFrame
function step() { requestAnimationFrame(step); // descrierea unui pas} step();
/* acesta poate avea paratru elementulul modificat*/
requestAnimationFrame(step, element);
20
Neajunsuri
Tipul browserulului în dependență de versiune• webkitRequestAnimationFrame• mozRequestAnimationFrame• msRequestAnimationFrame
21
22
Fixare FPS
var fps = 15; function step() { setTimeout(function()
{ requestAnimationFrame(step); // Drawing code goes here }, 1000 / fps); }
Exemple canvas animatii
• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
24
Animație multilayer
http://html5.litten.com/using-multiple-html5-canvases-as-layers/
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
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.
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;
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.
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=iDi4PvmVzc8&list=PLf0k8CBUad-sHxpoBHLHIr3CwWfSmOYZR&index=5
30
Controlul animației interactive
3. Drag And Drophttps://www.youtube.com/watch?v=_
ycJAn_4StU&list=PLf0k8CBUad-sHxpoBHLHIr3CwWfSmOYZR&index=9
4. Utilizarea sprite images