Updated

FR Tutoriel 1.9 · Animations

Mis à jour le 9 mars, 2020

< 1.8 · modules — retour — 1.10 rem >

Tutoriel 1.9 · Animations

Animer un objet dans une page Svija implique trois éléments :

  • un objet à animer
  • quelque chose qui déclenche l’animation
  • un script qui décrit l’animation ( Javascript)

L’objet à animer

Tout objet ou groupe d’objets sur la page peut être animé.

Pour manipuler un objet, il faut connaître son ID : le nom qui apparaît dans le panneau Calques d’Illustrator lorsque on sélectionne l’objet ou le groupe.

Pour donner un ID à un objet, il suffit de cliquer deux fois sur l’objet dans le panneau Calques et renseigner le nom voulu.

Petit rappel des règles pour choisir un ID :

  • ne pas utiliser le tiret bas
  • les espaces seront convertis en tirets bas
  • les tirets restent inchangés
  • les autres caractères spéciaux sont convertis en entités HTML

Pour pouvoir différencier des mots, il est conseillé d’utiliser camel case pour les ID (de l’anglais, littéralement « casse de chameau »).

C’est une pratique qui consiste à écrire un ensemble de mots en les liant sans espace ni ponctuation, et en mettant en capitale la première lettre de chaque mot :

  • objetCible (au lieu d’objet cible, objet-cible ou objet_cible)

Déclencher une animation

Il y a de nombreuses façons de déclencher une animation, mais la plupart des animations dépendent de trois événements :

  • la souris de l’utilisateur passe par-dessus un objet (mouseover)
  • la souris ne passe plus par-dessus un objet (mouseout)
  • l’utilisateur clique sur l’objet (mousedown)

Comme pour l’objet à animer, il faut connaître l’ID de l’objet qui va déclencher l’animation.

Il est possible également de déclencher des animations quand la page charge, quand on descend la page, etc., mais les techniques avancées seront traitées ultérieurement.


Le script de l’animation

La « partie dure » de l’animation est la programmation.

Ce n’est pas spécialement compliqué mais la programmation implique des concepts qui ne font pas partie de la vie quotidienne.

Quand ça ne marche pas, on a souvent du mal a trouver la faille, ou les messages d’erreur paraissent cryptiques et peu utiles.

Ne perdez pas courage ! En commençant avec un exemple très basique, vous pourrez animer votre page.


Avant de continuer

Les étapes décrites ci-dessous présument que vous avez créé une page de votre site avec deux rectangles ayant les ID :

  • objetCible (C majuscule)
  • objetDeclencheur (D majuscule, sans accent)

Une fois que vous avez créé cette page et qu’elle est visible en ligne, vous êtes prêt·e à continuer le tutoriel.


Ma première animation

Pour la première animation, il faut se munir de l’ID de l’objet à animer, l’objet déclencheur et du comportement déclencheur :

  • objetCible (attribué dans le panneau calques dans Illustrator)
  • objetDeclencheur (attribué dans le panneau calques dans Illustrator)
  • la souris passe par-dessus (mouseover)

D’abord, on demande à l’objet déclencheur d’être à l’écoute de l’événement :

obj = document.getElementById('objetDeclencheur');
obj.addEventListener('mouseover', playAnim);

Ensuite, on déclare la création de l’animation :

var monAnim = new gsap.timeline({paused:true});
function playAnim(){ monAnim.play(); }

Pour finir, on décrit le mouvement de l’animation :

monAnim.to('#objetCible', 1.0, {scale:2.0});
monAnim.to('#objetCible', 1.0, {x:"+=5.0"});

Nous avons précisé deux transformations, mais on peut en faire autant qu’on ne veut. Il suffit de les ajouter en bas du script.

Quelques explications :

  • to = le mouvement va vers un état final (scale:2.0 plus bas)*
  • # = ‘objet ayant l’id’
  • 1.0 = durée de la transformation, en secondes
  • scale:2.0 = augmenter l’échelle de l’objet par un facteur de deux
  • x:”+=5.0″ = déplacer l’objet vers la droite de 5 rem (50 pixels)

*Si on avait mis « monAnim.from » l’objet aurait commencé à deux fois sa taille normale au lieu de finir dans cet état.


Installation du script d’animation

Voici le script d’animation sans interruptions :

obj = document.getElementById('objetDeclencheur');
obj.addEventListener('mouseover', playAnim);

var monAnim = new gsap.timeline({paused:true});
function playAnim(){ monAnim.play(); }

monAnim.to('#objetCible', 1.0, {scale:2.0});
monAnim.to('#objetCible', 1.0, {x:"+=5.0"});

Dans les paramètres de la page que vous avez créée, tout en bas, cliquer « SHOW », sur la barre « USER SCRIPTS (SHOW) », puis :

  1. cliquer sur « Add another User Script »
  2. sous « Type » choisir « body JS » (Javascript dans le corps de la page)
  3. dans « Name » entrer « une animation »
  4. dans « Content » coller le texte du script, ci-dessus
  5. cliquer sur « SAVE »

Actualise la page en question et glisse la souris au dessus de l’objet déclencheur.

L’objet cible bouge !

Pour ne rien vous cacher, il y a de fortes chances que l’objet ne bouge pas. Si c’est le cas…

Règles typographiques de programmation

Contrairement à l’écriture de tous les jours, la programmation est extrèmement sensible aux détails du texte.

Un seul caractère incorrect suffit à faire dérailler complètement un programme, souvent de manière incompréhensible.

Voici quelques règles de base pour éviter des problèmes potentiels.

Dans tout ce qui traite de la programmation (ID’s d’objets, noms de fichiers, etc.) évitez d’utiliser :

  • les accents
  • les espaces
  • les guillemets
  • les tirets, y compris le tiret bas

Les guillemets “courbes”

Si vous regardez les guillemets autour du mot courbes ci-dessus, vous verrez que le guillemet d’ouverture est différent du guillemet de fermeture.

Les guillemets de ce type s’appelent les guillemets courbes ou guillemets intelligents (par opposition aux guillemets droits qui sont symétriques).

Les guillemets courbes tuent la programmation.

Si votre script d’animation ne marche pas, vérifiez que le fait de copier et coller le programme ci-dessus n’a pas introduit de guillemets courbes.

Désactiver les guillemets courbes dans TextEdit

Pour désactiver les guillemets courbes par défaut, aller sous le menu TextEdit, à Préférences :

preferences-textedit

En bas, à droite, décochez « Guillemets courbes ».

Ensuite, vous pouvez vous servir de TextEdit sans danger que les guillemets courbes soient introduits par erreur.


L’inspecteur web

Vous n’êtes pas la première personne à rater un programme Javascript.

Heureusement, vous avez déjà à votre disposition des outils puissants pour vous aider à trouver la faille.

Tous les navigateurs courants fournissent un outil pour examiner de près la construction d’une page web : l’inspecteur web.

Dans Chrome et Firefox, l’inspecteur web est disponible par défaut. Pour l’activer dans Safari :

  • allez sous le menu Safari à Préférences…
  • cliquer sur l’onglet “Avancées”
  • cochez la case “Afficher le menu développement dans la barre des menus” (tout en bas)

En cherchant l’erreur dans le script d’animation, il y a deux endroits à vérifier :

  • le code source de la page
  • les erreurs Javascript

Que chercher dans le code source

Regarder dans le code source de la page va vous permettre de vérifier que les objets cible et déclencheur sont correctement identifiés et que le script d’animation est bien présent.

Pour voir le code source de la page :

  • Safari : cmd-option-I puis onglet « Sources »
  • Chrome : ctrl-cliquer sur la page puis « Afficher le code source »
  • Firefox : cmd-U

Pour que ça fonctionne, il faut éviter de cliquer sur un lien. Une fois le code source visible :

  1. appuyer sur cmd-F pour chercher
  2. chercher « objetCible » et vérifier que tout paraît correct dans le SVG
  3. chercher « objetDeclencheur » et vérifier que tout paraît correct dans le SVG
  4. chercher « monAnim » et vérifier que tout paraît correct

Si l’un des éléments est manquant, il faut vérifier le bon téléchargement de la page et le fait que le script soit correctement installé dans les paramètres de page.

Vérifiez aussi que la casse des ID est correcte (objetCible et objetDeclencheur) et qu’ils ne comportent pas d’accent.

Que chercher dans les erreurs de Javascript

Pour voir les erreurs de Javascript, on se sert de l’inspecteur web. C’est la même manipulation dans les trois navigateurs :

  • cmd-option-i puis l’onglet « Console »

Pour un·e débutant·e, c’est souvent difficile d’interprêter les messages d’erreur.

S’il y en a pas, c’est que la faille se trouve dans l’organisation de votre page Illustrator ou dans les paramètres de la page dans Svija Admin.

S’il y a des erreurs et qu’il semble que les erreurs viennent de votre programme :

  • vérifier que la casse des ID est correcte (dans le script et dans Illustrator)
  • vérifier qu’un guillemet courbe ne s’est pas introduit
  • vérifier que le script est complet dans le code source

Liste d’animations et options possibles

Il y a beaucoup d’animations possibles (liste). Parmi les plus simples :

  • x:10 · déplacer 100px vers la droite
  • y:10 · déplacer 100px vers le bas
  • rotation:360 · tourner 360°
  • scale:2 · agrandir de 200%
  • scaleX:2 · agrandir de 200% horizontalement
  • scaleY:2 · agrandir de 200% verticalement
  • autoAlpha:0.5 · réduire l’opacité à 50%

Chaque transformation listée peut remplacer la partie en rouge ci dessous :

monAnim.to('#objetCible', 1.0, {scale:2.0});

On peut aussi combiner les transformations, séparées par des virgules :

monAnim.to('#objetCible', 1.0, {scale:2.0, autoAlpha:0.5});

Il y a aussi des options pour avancer ou retarder une animation. La partie en rouge avance cette animation de 0.7 secondes :

monAnim.to('#objetCible', 1.0, {scale:2.0}, "-=0.7");

Pour déclarer un point de référence fixe pour un élément qui change de taille, on ajoute transformOrigin. La partie en rouge précise quel partie de l’élément restera stationnaire quand il double en taille :

monAnim.to('#objetCible', 1.0, {scale:2.0,transformOrigin:"50% 0%"});

Le 50% 0% précise un point fixe à 50% de l’axe horizontal (X) et à 0% de l’axe vertical (Y), relatif au coin supérieur gauche.

NOTE : en animant de objets à l’intérieur d’un SVG il n’est pas nécessaire de préciser les unités (px). L’unité utilisée sera le rem (1 rem = 10px).

Lorsqu’un SVG entier est déplacé, il est nécessaire de préciser l’unité (x:’+=10rem’).

Pour plus d’informations :


Où est mon script ?

Les scripts peuvent être ajoutés dans les paramètres de chaque page ou module, mais éditer un script dans Svija Admin peut être laborieux.

Pour faciliter la programmation d’un script, plutôt que de mettre le script lui-même dans la case « content » des paramètres, on peut préciser le nom du script :

  • mon-script-animation.js

Svija cherchera le script automatiquement dans le dossier sync, dans « scripts » :

dossier de travail
└─ sync    ├─ admin    ├─ desktop    ├─ files    ├─ fonts    ├─ images    ├─ mobile    └─ scripts       └─ mon-script-animation.js


En laissant tourner Svija Sync, on peut travailler sur l’animation et la modifier jusqu’à atteindre à l’effet voulu.


Déclencheurs d’animations

Dans un projet comportant plusieurs animations, on peut vite se perdre et oublier quels objets sont animés et quels objets déclenchent des animations.

Si l’objet déclencheur est invisible, et l’animation ne marche pas, on peut avoir des doutes : « est-ce que j’ai bien passé la souris au bon endroit ? »

Il est donc conseillé de créer un calque Illustrator appelé « triggers » et d’y mettre des rectangles de couleur vive qui serviront d’objets déclencheurs.

Pendant la phase de développement, on met l’opacité de tous les objets de ce calque à 20% pour les retrouver facilement sur la page.

Dès que la page est terminée, il suffit de les sélectionner tous et de remettre l’opacité à 0%.


Poursuivre le tutoriel : REM.

Leave a Reply

Your email address will not be published.