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