About
Animation is defined as a series of steps from one object state to another through transition.
Animations in web browsers come in two forms:
- native (declarative ones), such as the <animate> element in SVG
- script implemented
Creation
An Animation is just sequences of different state with or without Transition. Therefore you can create an animation with:
- Snapshot: With a series of snapshot, you can create an animated GIF (with Gimp for instance) (no scalability anymore as it's a raster image)
- Transition: Define a transition inside your SVG or HTML element. All major web browsers support transitions via CSS or Javascript.
Management
Tween
A sequence of frames is called a tween. See Data Viz - Inbetween - Tweening, Interpolation (Animation)
Frame Frequency
- on twos: 12 drawings per second. The film Fantasmagorie (1908) gives a good example and was considered the first fully animated movie.
- When the number of inbetweens is too few, such as 4 frames per second, it will begin to lose the illusion of movement altogether.
- Slow movements may be animated on threes or fours.
Method
- Visible: Yes / No
Type
- Bounce
- Fade
- Flip
- Slide
- Zoom
Twelve basic principles
Animation Software
All software that can draw can animate but some framework are more animation focus than other.
- Processing:
- https://animate.style/ - css declarative based