Simulace 1

16. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Animace

Co si pamatuje z animaci z WBA?

Animace v CSS

  • přechodové animace (transition)
  • pravé s snímky (@keyframes)
  • problém s animacemi vlastností, které nemají přechodné hodnoty

Animace v JS

  • pokročilé pomocí příkazů (.animate())

Proč animace pomocí JS používáme?

Povědomé...

Práce

Canvas

V následujících hodinách se budeme zaobírat animacemi zejména pro grafické vylepšení webů. Ukážeme si však i jak se používají k simulacím či jak se používají pro základní hry.

Canvas

  • tag <canvas>
  • jediný prvek v HTML5 určený k vykreslování
  • pomocí skriptu říkáme, co se má vykreslit

Kontext

  • určuje, jaké metody a jak vykreslujeme do canvasu
  • funkce na canvas HTML v DOMu .getContext(type)
  • jediný typ (prozatím): 2d

Souřadnice

  • souřadnice v 2D kontextu fungují jako obvyklá mřížka
  • horní levý roh je pozice (0,0)

Práce s cestami

  • nějaké tvary tvoříme z cest
  • cesty musím začít — beginPath
  • cesty musím ukončit — closePath

  • cesty poté můžeme vyplnit — fill()
  • cesty poté můžeme ohraničit — stroke()

Jak určujeme barvu výplně a jak nastavujeme šířku ohraničení?

Můžeme udělat jak vyplnění tak i ohraničení na jedné cestě?

Základní tvary

  • fillRect(startX, startY, endX, endY) — vykreslí obdelník

  • moveTo(startX, startY) — začátek čáry
  • lineTo(endX, endY) — konec čáry
  • arc(x, y, r, startAngle, endAngle) — definice cesty křivky

Voda

Práce

Další části

Vypisování textu

Obrázky

Přesuny a otáčení

A další...

  • přechody barev
  • .save()
  • .restore()

Animace canvasu

Animace canvasu

  • do canvasu můžeme postupně věci přidávat (tj. zavoláme metody)
  • canvas můžeme vyčistit pomocí clearRect

Opakování

  • lze použít setInterval a setTimeout
  • nová funkce window.requestAnimationFrame(fnc)

Jaké jsou výhody jednotlivých možností opakování / překreslení?

Voda teče

Práce

Proč nepoužíváme práci s DOMem (např. absolutní pozicování) místo canvasu?

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/