Generative Design [1]

1. Animation principles

1. Animation principles

1. Animation principles

Disney Animation: The Illusion of Life

 

1981

1. Animation principles

  • Timing & Spacing
  • Follow through
  • Anticipation
  • Squash & Stretch
  • Staging
  • Secondary action
  • Exaggeration
  • Mass & Weight
  • Appeal

1. Animation principles

Timing & Spacing

Timing : Durée totale du début de l'animation à la fin.
Duration

 

Spacing : Changement dans l'espace entre chaque frame de l'animation. Ce qui permet de donner un sens au mouvement.
Easing (timing-function)

1. Animation principles

1. Animation principles

Follow through

Quand un élément bouge, il peut entraîner avec lui d'autres parties.

Chaque partie peut bouger avec une vitesse différente.

1. Animation principles

1. Animation principles

Anticipation

L'élément animé émet une petite hésitation avant de bouger.

Permet à l'utilisateur de se préparer pour une animation.

1. Animation principles

Squash & Stretch

L'élément animer s'allonge ou s'étier comme un élastique.

Permet d'accentuer une animation.

Donne un sentiment de matière ou de masse à un élément.

1. Animation principles

Staging

Attirer l'attention de l'utilisateur vers l'élément le plus important de la page.

1. Animation principles

Secondary Action

Animation qui accompagne ou améliore l'animation principale.

1. Animation principles

Exageration

Accentuer l'animation pour la rendre plus visible ou lui donner plus d'impacte.

1. Animation principles

Appeal

L'esthétisme de l'animation.

1. Animation principles

Mass & Weight

Poids & volume donné à un élément pour le rendre plus réaliste.

1. Animation principles

1. Animation principles

1. Animation principles

1. Animation principles

1. Animation principles

2. GSAP

2. GSAP

  • Librairies d'animation
  • Gratuit*
  • Peut animer
    • DOM Element (CSS)
    • SVG
    • Javascript object
    • ...
  • Unifie les navigateurs

2. GSAP

TweenLite

TimelineLite

TweenMax

TimelineMax

Permet de faire une transition sur un objet Javascript.
Demande CSSPlugin pour animer de l'HTML.

Permet de créer une Timeline d'animations.
Demande Tween(Lite/Max).

Librairie la plus complète. 

TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin [...]

Version améliorée de TimelineLite.

2. GSAP

2. GSAP

2. GSAP

2. GSAP

TweenLite/TweenMax .to/.from/.fromTo/.staggerTo/.staggerFrom(Selector/Variable, seconds {
  properties / delay/ Ease / repeat
}, interval);

TweenMax.to('.modal', 1, {

  x: 100,

  opacity: 0,

  ease: Power2.easeOut

});

2. GSAP

2. GSAP

Exercices

2. GSAP

TimelineMax

var tl = new TimelineMax();

tl.to(el, 0.5, {
  x: 100
});
tl.to(el, 0.5, {
  y: 100
});

2. GSAP

Exercices

3. SVG

3. SVG

viewPort

<svg xmlns="http://www.w3.org/2000/svg"
    width="184.7"
    height="197.6"
    viewBox="0 0 184.7 197.6">

3. SVG

viewBox

<svg xmlns="http://www.w3.org/2000/svg"
    width="184.7"
    height="197.6"
    viewBox="0 0 184.7 197.6">

3. SVG

3. SVG

3. SVG

preserveAspectRatio

Align :
xMinYMin
xMidYMin
xMaxYMin
xMinYMid
xMidYMid*
xMaxYMid
xMinYMax
xMidYMax
xMaxYMax

Meet or slice
meet*
slice

 

none

3. SVG

3. SVG

3. SVG

3. SVG

1 - Generative Design [2017-2018]

By Louis Hoebregts

1 - Generative Design [2017-2018]

  • 146
Loading comments...

More from Louis Hoebregts