(Avancé) expressions et interactions

Note

Le support des expressions est limité : voir la documentation

Le support des expressions est relativement limité : oubliez time, wiggle, etc…

Vous pouvez par contre lier des éléments les uns aux autres d’un calque à l’autre.

Exemple d’usage avancé

En trichant un peu, il est possible de bricoler des choses.

Ici, on souhaite pouvoir lier des expressions avec des interactions (survolez l’animation) :

master.js

Ici l’on créé les variables et les interactions

// on déclare nos variables
var x = 0;
var y = 0;

// on ajoute un écouteur d'événement
document.body.addEventListener( 'mousemove', obtenir_pourcentage_largeur, false );

// la fonction est appelée par l'écouteur d'événement
function obtenir_pourcentage_largeur ( evenement ) {
   /* calcul la position du curseur sur la vue sous forme de %
   et l'assigner à x et y
   le * 60 - 30 permet d'avoir une valeur entre -30 et 30 */
   x = evenement.clientX / window.innerWidth * 60 - 30;
   y = evenement.clientY / window.innerHeight * 60 - 30;
}

expressions

var x = 0; // si ces deux premières lignes ne sont pas présentes,
var y = 0; // l'expression sera erronée et pas exportée
[position[0]+x,position[1]+y]

Note

À ce stade, le dispositif ne fonctionnera pas à cause des deux premières lignes de l’expression.

Ces deux lignes ne peuvent pas être enlevées dans After Effects (sinon l’expression ne sera pas exportée). Il faut éditer le fichier .json exporté afin d’enlever ces deux lignes.

Comparez les fichiers animation.json et animation-modifie.json