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

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

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 :

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
Animation avec fonction dédiée

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