STIC:STIC I - exercice 6 (Wall-e)
Aller à la navigation
Aller à la recherche
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()ousetTimeout()- 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