« STIC:STIC I - exercice 6 (Wall-e) » : différence entre les versions
Aller à la navigation
Aller à la recherche
m (→Prérequis) |
|||
Ligne 27 : | Ligne 27 : | ||
* Connaissances de base de HTML/CSS/JavaScript | * Connaissances de base de HTML/CSS/JavaScript | ||
* Savoir incorporer des fichiers externes JS/CSS en respectant les chemins ! | * 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 : | |||
* <code>setInterval()</code> ou <code>setTimeout()</code> | |||
* Le principe de frame rate | |||
* Exemple : http://codepen.io/mafritz/pen/zKrkLB | |||
; Animation avec fonction dédiée : | |||
* <code>requestAnimationFrame()</code> | |||
* Fonction récursive | |||
* Exemple : http://codepen.io/mafritz/pen/XjyRBV |
Version du 8 novembre 2016 à 14:39
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