RAČUNALNA ANIMACIJA NA WEBU




Ana Marija Komar

Mentor: prof. dr. sc. Željka Mihajlović

Fakultet elektrotehnike i računarstva

Računarska znanost


Zagreb, 12. srpnja 2013.

Što koristiti za animacije na webu?


Zašto bi koristili priključke, kada možemo iskoristiti ono što je ugrađeno?!

HTML5

Animacija


CSS i animacije

Tranzicije - transition


Promjena se odvija postupno iz jednog stila u drugi kroz određeni period vremena


Animacije - animation


Definiraju se: stil animacije i niz okvira koji određuju početno i konačno stanje animacije, te međustanja


  • animation-delay
  • animation-direction
  • animation-duration
  • animation-iteration-count
  • animation-play-state

Animacije - @keyframes


Identifikator pravila => daje ime animaciji i niz pravila => definiraju animaciju


Svaki ključni okvir određuje koji se animirani element treba prikazati tijekom trajanja animacije


Ključni okviri koriste postotak kako bi odredili vrijeme kada se određeni dio animacije prikazuje

Animacije - @keyframes


WebGL i animacije

canvas



  • oznaka(eng. tag) u html dokumentu
  • postavljanje ID elementa
  • postavljanje širine i visine

<canvas id="canvas" width="300" height="300"> => imamo prazan "papir" za crtanje

WebGL


  • eng. Web Graphics Library je JavaScript API temeljen na OpenGL ES 2.0
  • Omogućuje prikaz 3D grafike unutar bilo kojeg kompatibilnog web preglednika bez korištenja dodataka

  • WebGL programi se sastoje od :
    • kontrolnog koda napisanog u JavaScriptu
    • koda za sjenčanje (eng. shader)
  • koristi HTML5 Canvas element i pristupa mu koristeći DOM sučelje.

Kontrola animacije - Animacijska strategija


  • kontrola animacije => vremenski odmak
  • Nedostatak: mogućnost izgubljenih okvira

Kontrola animacije - Simulacijska strategija


Osigurava se neprekinutost prikaza računanjem sljedećeg položaja elementa

Nedostatak: mogućnost smrznutih okvira

Primjer - Zvjezdice (simulacijska strategija)

Zaključak...