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 :

//Identify the canvas
var canv = document.querySelector("#myCanvas");

//Create a context to draw
var ctx = canv.getContext("2d");

//Use the api to draw
ctx.fillStyle = "darkorange";
ctx.fillRect(40, 40, 100, 100);

//Other shape
ctx.beginPath();
ctx.moveTo(200, 250);
ctx.lineTo(450, 50);
ctx.lineTo(450, 250);
ctx.closePath();
ctx.fillStyle = "darkgreen";
ctx.fill();
ctx.stroke();

p5.js

L'API de base pour dessiner dans un élément de type canvas n'est pas très pratique. Pour cette raison, il existe plusieurs bibliothèques JavaScript qui essaient d'en faciliter l'usage, comme par exemple p5.js.