Animations
FE Implementation quirks
Agenda
- methods
- patterns
- implementations
- examples
Methods
#1 CSS
`transition`
Styling with CSS
- selectors for elements of document
- properties and values
- classes - styles application
- transition: property change behavior
- animation property: timeline superpowers
- sometimes just clever tricks (no animation)
#2 JavaScript
DOM in motion
Scripted changes
- content change
- document manipulation
- overcoming "transition" and "animation" limitations
#3 Canvas
Pixel Painting
Canvas
- 2D raster space
- drawing lines, shapes, text, images
- per-pixel manipulation
- potentially any raster picture possible
#4 WebGL
Super Pixel Painting
WebGL
- also Canvas based
- advanced API for GPU based graphic pipeline
- shaders (GPU compiled programs)
- data provided to GPU buffers (vertex & textures)
- best performance and quality (think video games)
- complex programming
Patterns
Tween
Tween
- "in between"
- interpolation between start and end state
- value as function of time
Easings
Easing functions
- function types: linear, trigonometrical, polinominal ...
- pick right for best outcome
- linear for constant change
- sinusoidal for "natural, round" feeling
- custom cubic Bezier curve for other cases
Keyframes
Classic idea
- motion dissected to series of discrete steps
- each step - key frame - describes state
- allows for independent properties changes
Physics
Physics engine
- computer symulation of physics law
- provided with state model and forces calculate changes to environment
- from simple rigid body to fluid dynamics
- useful for
- natural "experience"
- complex state
- hard to determine outcome
Physics engine
- set of rules for animation system
- range from basic to quite complex
- potential performance issue
- tons of existing solutions and patterns
- freedom & interactivity
Implementation
CSS
CSS
1. base class
- base properties
- transition property
2. animation class
- animated property
.button {
background: blue;
font-size: 13px;
border-radius: 5px;
transition: background 0.3s linear;
}.button--alert {
background: red;
}