Data Vizualisation - Animation

1 - 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

3 - 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.

4 - Management

4.1 - Tween

A sequence of frames is called a tween. See Data Viz - Inbetween - Tweening, Interpolation (Animation)

4.2 - 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.

5 - Method

6 - Type

  • Bounce
  • Fade
  • Flip
  • Slide
  • Zoom

7 - Twelve basic principles

8 - Animation Software

9 - Studio

10 - Documentation / Reference

10.1 - Blog

10.2 - Twitter thread

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap