STIC:STIC I - exercice 6 (Wall-e)

Cette page fait partie des cours STIC I et STIC II

STIC

Introduction

Cet exercice introduit le concept d'animation principalement d'un point de vue technique : quels sont les mécanismes qui permettent d'animer des éléments dans une page web.

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

• Savoir définir une animation d'un point de vue technique
  • Comprendre le mécanisme de rendering/redrawing d'un navigateur web
  • Connaître le principe de frame rate et sa conséquence sur (a) la perception des utilisateur; (b) les ressources hardware du navigateur
• Savoir identifier et choisir parmi trois grands types d'animation pour le web (UI Animation, Draw Animation, 3D Animation)
• Réflechir sur les enjeux pédagogiques des animations
• Évaluer différentes bibliothèques JavaScript par rapport à leurs finalités et choisir en fonction des objectifs du dispositif

Prérequis

Lectures conseillées :

• Animation avec JavaScript (seulement chapitre 2, sans code, lecture de quelques minutes)

Prérequis techniques :

• Connaissances de base de HTML/CSS/JavaScript
• Savoir incorporer des fichiers externes JS/CSS en respectant les chemins !

Activité en salle de classe

Techniques d'animation de base

Animations liées au temps

• setInterval() ou setTimeout()
• Le principe de frame rate
• Exemple : http://codepen.io/mafritz/pen/zKrkLB

Animation avec fonction dédiée

• requestAnimationFrame()
• Fonction récursive
• Exemple : http://codepen.io/mafritz/pen/XjyRBV

UI Animation

CSS Animation

Utilisation de classes CSS avec le décorateur @keyframes from ... to :

/* The animation code */
@keyframes example {
  from {
    background-color: red;
    maring-left: 0px;
    color: #FFF;
  }
  to {
    background-color: yellow;
    margin-left: 600px;
    color: #000;
  }
}

div {
  width: 300px;
  height: 200px;
  background-color: red;
  margin-bottom: 20px;
  line-height: 200px;
  text-align: center;
  font-size: 2em;
  color: #FFF;
  border: 1px solid #000;
}
/* The element to apply the animation to */

div.animation {
  animation-name: example;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

Exemple : http://codepen.io/mafritz/pen/ammyxN

CSS transition

Possibilité d'utiliser de manière dynamique des transitions entre états d'un élément (e.g. un bouton) :

button#add {
  background-color: #006699;
  color: #FFF;
  padding: 15px 20px;
  border: 1px solid #999;
  font-size: 1.1em;
  transition: background-color 0.3s ease-out;
}

button#add:hover {
  background-color: darkorange;
}

button#add:active {
  background-color: black;
}

Exemple : http://codepen.io/mafritz/pen/NNmgqG

VelocityJS

Pour des animations UI plus complexes, il existe des bibliothèques JavaScript qui mettent à disposition des méthodes pour animer les éléments du DOM, comme par exemple VelocityJS.

Pour utiliser cette bibliothèque :

1. Inclure jQuery
   • Download du fichier
   • Utilisation du lien CDN https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
2. Inclure le fichier de la bibliothèque VelocityJS
   • Download du fichier
   • Utilisation du lien CDN https://cdnjs.cloudflare.com/ajax/libs/velocity/1.3.1/velocity.js

Exemple de code :

$("#box")
    .velocity(
      //Define the properties to change
      {
        rotateX: 180,
        rotateY: 180,
        rotateZ: 180,
        marginLeft: 400,
        backgroundColor: "#FF0000"
      },
      //Define the duration
      4000,
      //Define the type of effect
      "spring"
    );

Exemple : http://codepen.io/mafritz/pen/gwkvEJ

Draw Animation

HTML5 Canvas

HTML5 met à disposition une API pour dessiner à l'intérieur d'un élément appelé canvas qui possède une balise avec le même nom.

<canvas id="moncanvas" width="800" height="400">
    Message pour les navigateurs ne supportant pas encore canvas.
</canvas>

De plus, HTML5 met directement à disposition des moyens pour manipuler cet élément (i.e de "dessiner") à travers JavaScript :

//Code