Animace a simulace

MVOP4 WBF

Bc. Matěj Cajthaml ©

Smíchovská střední průmyslová
škola a gymnázium

icon

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í interpolovatelné hodnoty

Animace v JS

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

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

Animace ve Vue

Přechody mezi stavy

  • tag <Transition>
  • zapne animaci při přechodu stavů prvku
  • musí mít jeden root tag (např. i komponenta)

Ukázka

Ukázka

Ukázka

Zjistěte, zda se můžeme na události <Transition> zachytit kódem. Proč bychom to dělali?

Skupiny animací

Často potřebujeme animovat jeden prvek v závislosti na ostatních. Proč?

Přechodové skupiny

  • tag <transition-group>
  • kontroluje všechny prvky a případně zapne animaci

Ukázka

Ukázka

Bonusové

https://auto-animate.formkit.com

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í

Ukládání

  • uložíme pozici a další vlastnosti kontextu
  • později můžeme obnovit do této fáze
  • .save()
  • .restore()

Na co by se to mohlo hodit?

Přechody barev

  • barvy můžeme měnit pomocí fillStyle a strokeStyle
  • přechody můžeme vytvořit pomocí createLinearGradient a createRadialGradient

createRadialGradient

Jak můžeme změnit průhlednost barvy prvku v canvasu? Např. nějakému čtverci?

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)
  • argumentem je funkce, která se má dále zavolat (není automatické opakování)

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

Animace se změnou dat

Animace závislá na čase

Závislost na vstupu

Pozicování s canvasem

Voda teče

Práce

Simulace

Simulace

  • předpokládáme nějaký stav, pravidla a vývoj
  • můžeme simulovat chování a interakce
  • často velmi pokročilá matematika, různé fyzikální zákony
  • omezený výkon pro simulace
  • lze využívat service workery, viz další hodiny

Optimalizace

  • předpočítávání
  • zjednodušení/aproximace
  • použití knihoven

Systém tří těles

Fraktál 1

Fraktál 2

Shader

Vykreslování v DOMu

Důvod

  • tvorba animací je složitá
  • závislosti, různá interpolace, různé efekty
  • přehlednost a čitelnost kódu
  • rychlost a optimalizace, např. hw akcelerace

Knihovny

GSAP 1

GSAP 2

GSAP 3

GSAP

Práce

Zjistěte si informace o následujícím a použijte:

  • motion path
  • FLIP
  • smooth scrolling
  • draggable

Jakou licenci má GSAP?

Kdy použít canvas?

Když potřebujeme animovat něco, co se vykresluje často a potřebujeme kontrolu nad tím, co se (a jak) vykresluje.

Kdy použít DOM vykreslování?

Když je prvků málo a nejsou příliš složité. Je nám jedno, jak je DOM vykresluje.

Hry a organizace

Čistě teoreticky již vše na vytvoření hry již známe... ale co je třeba ještě zohlednit?

Organizace kódu

  • nejspíše nestačí jen jeden soubor, hromada volání a funkcí
  • rozumné rozdělení na třídy, moduly, funkce
  • polymorfismus na vykreslování

Třídy

  • můžeme vytvořit entity/renderable třídu
  • třída pro hru, třída pro scénu, ...
  • nutnost vytvořit systém pro zachycení interakcí

Had

Další hry

Práce

Vytvořme další hru, např.:

  • tetris
  • pexeso
  • minesweeper

Více hráčů?

Příští látka!

Pixi

Práce

Zjistěte, co je Pixi a jak se používá. Proč je lepší použít Pixi než čistý canvas?

WebGL

Co je WebGL?

Kolik % uživatelů dle prohlížeče podporuje WebGL?

Jak se liší WebGL a 2D kontext v canvasu?

Co jsou to shadery?

Ukázka WebGL

Ukázka WebGL shaderů 1

Ukázka WebGL shaderů 2

No tak to asi ne...

WebGL na webu v takovéto formě skoro nikdo nevyužívá. Proč?

Three.js

Three.js

  • knihovna pro 3D vykreslování
  • pomocí WebGL
  • má vyřešené základní problémy:
    • základní i pokročilé shadery
    • meshe, materiály, světla
    • kamery, scény
    • animace, načítání modelů, ...
  • dokumentace: https://threejs.org

Výhody

  • vše je připravené
  • pomocné třídy
  • dokumentace
  • komunita

Nevýhody

  • poměrně těžká knihovna (spousta kódu)
  • neumí řešit vše
  • kompatibilita s vlastními řešeními
  • náročnější na výkon, ne každý web

Načtení a scéna

Základní pojmy

  • mesh — objekt, který se vykresluje (určení bodů, propojení)
  • material — vlastnosti vykreslování (barva, textura, ...)

Přidání objektů

Přidání objektů správně

Úprava objektů

Materialy

Perspektivní a ortogonální kamera

Světla

Interakce

Bonus

Práce

Zjistěte si a použijte:

  • animace v Three.js
  • načítání modelů

Inspirace

Práce

Projděte webové stránky Three.js a zbytek internetu pro inspiraci na použití Three.js na reálných projektech.

Spline

Práce

Zjistěte, co je Spline (spline.design) a jak se používá.

Děkuji za pozornost!

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