Kvikun - GunnarThorunnarson/FORR3JS05DU GitHub Wiki

Kvikun (e. animation) er þegar við látum eitthvað hreyfast eftir ákveðnum reglum. Með því að nota hreyfingar getum við gert viðmót eðlilegra, vinalegra og skemmtilegra. Kvikun er frábær leið til að koma skilaboðum til neytandans á skemmtilegan og áhrifaríkan hátt. The State of Web Animation

Grunnatriði í kvikun

Animated icons
Motion: Understanding motion, Speed og Choreography
12 grunnreglur hreyfimyndagerðar: The illusion of life (myndband)

Útfærsluleiðir

SVG Animation (SMIL) hætt að nota
CSS animation
Web Animations API innbyggt í vafra, CSS og JavaScript
JavaScript söfn: 10 Popular Choices

Aðferðirnar hafa sína kosti og galla en það fer eftir viðfangsefni hverju sinni hvað hentar best. SMIL var vinsælt áður fyrr og er innbyggt en er lítið notað í dag. CSS animation er sniðugt í litlum UI tengdum hreyfimyndum og táknum en er frekar takmarkað og býður ekki uppá mikla gagnvirkni.

Web Animation API sem er enn í þróun (working draft) byggir á því að nota CSS og JavaScript saman og er innbyggt í vafra og býður uppá meiri stjórn og flóknari effecta. Í dag eru það JavaScript söfn sem bjóða upp á mestu breidd og gagnvirkni kvikun. Sjá nánar A Comparison of Animation Technologies

CSS kvikun

Chrome DevTools: Animations: Inspect and modify CSS animation effects

CSS kvikun (á íslensku)
CSS Transitions and Transforms for Beginners transition (easing), transform (rotate, scale, translate)
CSS Animation for Beginners
The Main Difference Between CSS Animations & Transitions

Að vinna með path í CSS

Animate SVG path with CSS og kóði notar path-animation.js safn
SVG Line Drawing Animation og Animated line drawing in SVG
Creating Morphing Animations with CSS clip-path og kóðadæmi
Shape Morphing