Data Vizualisation - Animation

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
• Viz - (Animated) Transition

Type

• Bounce
• Fade
• Flip
• Slide
• Zoom

Twelve basic principles

wiki/Twelve_basic_principles_of_animation

Animation Software

All software that can draw can animate but some framework are more animation focus than other.

• https://greensock.com/
• LOOPY - a tool for thinking in systems
• https://plot.ly/javascript/animations/
• https://two.js.org/#basic-usage
• http://mojs.io/
• http://velocityjs.org/
• Processing:
  • https://p5js.org/examples/hello-p5-animation.html
  • https://www.openprocessing.org/
• https://animate.style/ - css declarative based

Studio

https://www.in60seconds.nl/producten/animatie-laten-maken/

Documentation / Reference

• Animated Transitions in Statistical Data Graphics - Jeffrey Heer, George Robertson
• wiki/Motion_graphics

Blog

Evolution of <img>: Gif without the GIF by Colin Bendell

Twitter thread

• create animations with multiple shapes, expressed in code