Simulace 3

22. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

WebAssembly

V čem se dají programovat webové stránky?

No... a to se lidem nelíbí! Proč?

WebAssembly

  • způsob, jak spustit kód v různých jazycích na webových stránkách
  • opensource, skoro každý jazyk
  • .wasm a .wat
  • z kódu poté můžeme volat funkce a získávat hodnoty

Co je to vůbec Assembly?

Víme, že můžeme získávat hodnoty z funkcí. Můžou funkce upravovat stránky?

Spuštění WebAssembly

Kompilace

  • zdrojový programovací jazyk
  • soubor formátu WAT
  • dokumentace

Spuštění WebAssembly

Myslíte si, že je WebAssembly pomalejší než čisté JS?

Jde pustit WebAssembly mimo prohlížeč?

https://webassembly.org

Kolik % prohlížečů podporuje WebAssembly?

Lze pomocí WebAssembly předávat např. stringové hodnoty? Jak?

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

Knihovny pro animace

Knihovny

https://auto-animate.formkit.com

http://tweenjs.github.io/tween.js/

Pokročilé ThreeJS

fullscreen

Děkuji za pozornost!

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