Animer selon un cercle¶
Nous allons maintenant voir comment animer un élément selon un cercle.
C’est extrêmement simple, nous allons simplement utiliser time comme valeur d’angle : cette valeur s’incrémentant avec le temps, les coordonnées calculées correspondront à un point mouvant le long du cercle.
// rayon du cercle
var rayon = width / 3;
/* la vitesse désirée
plus le nombre est bas
plus c'est lent */
var vitesse = 0.5;
/* calcul des positions */
var x = position[0] + Math.cos( time * 2 * Math.PI * vitesse ) * rayon;
var y = position[1] + Math.sin( time * 2 * Math.PI * vitesse ) * rayon;
[x,y]
Pour aller plus loin¶
Comme nous l’avons vu, il existe différents paramètres : vitesse, rayon…
Mais il est possible d’aller plus loin en choisissant :
- la position de départ (de 0 à 2π)
- le sens de rotation
- un nombre de tour à effectuer du début à la fin de la composition
// rayon du cercle
var rayon = width / 3;
/* nombre de tours à effectuer
sur la durée de la composition */
var nombre_tours = 2;
/* position de départ sur le cercle */
var position_de_depart = Math.PI/2;
/* situation temporelle dans la composition :
0 = première image, 1 = dernière image */
var position_ds_la_compo = time / thisComp.duration;
/* calcul de l'angle */
var angle = 2 * Math.PI * position_ds_la_compo * nombre_tours + position_de_depart;
/* calcul de la position
Le - devant l'angle du sinus permet
d'inverser la direction */
var x = position[0] + Math.cos( angle ) * rayon;
var y = position[1] + Math.sin( -angle ) * rayon;
[x,y]