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