utiliser des expressions avec Lottie

étape 1 : placer une expression dans After Effets

Dans un premier temps, il va falloir insérer une expression pour piloter la valeur choisie. On indique une déclaration puis la variable :

../../_images/ae-expression.png
var ma_variable = 0;
ma_variable

Première ligne : on déclare la variable, c’est obligatoire pour pouvoir exporter l’expression. On précise bien une valeur (la valeur exacte est sans importance, mais il faut une valeur); Seconde ligne : cette valeur sera utilisée.

étape 2 : exporter votre animation

Exportez l’animation au format JSON.

étape 3 : modifier votre animation

Dans votre éditeur de code, ouvrer le json à la recherche de votre expression, en tapant le nom de la variable.

../../_images/json-1.png

On observer la chaîne de caractère suivante :

"var $bm_rt;\nvar ma_variable = 0;\n$bm_rt = ma_variable;"

Ce qui correspond à :

var $bm_rt;
var ma_variable = 0;
$bm_rt = ma_variable;

On souhaiter supprimer la partie surlignée :

var $bm_rt;
var ma_variable = 0;
$bm_rt = ma_variable;

Ce qui correspond à :

../../_images/json-2.png

On obtient donc :

../../_images/json-3.png

On effectue donc le remplacement qui suit :

avant : "var $bm_rt;\nvar ma_variable = 0;\n$bm_rt = ma_variable;"
après : "var $bm_rt;\n$bm_rt = ma_variable;"

On sauvegarde et on peut passer à la suite.

étape 4 : préparer la valeur en js

Il ne reste plus qu’à déclarer dans master.js une variable ma_variable avec une valeur par défaut.

var ma_variable = 0;

étape 5 : piloter notre variable

Dernière étape, piloter la variable. Cette étape se fait selon le résultat souhaité : se référer aux autres documentations.