Publié le par benoit
dans la ou les catégorie(s) : code

Dans les trucs et astuces de la programmation, une notion est importante, celle des tableaux.
L’écriture passe par des crochets et des virgules et on accède aux différentes entrées par des crochets et un nombre.

var tableau = [10,15,42]; // un tableau
console.log(tableau[0]); // 10
console.log(tableau[1]); // 15
console.log(tableau[2]); // 42

On peut compter le nombre d’éléments dans un tableau avec la propriété length

console.log(tableau.length); // 3

La maitrise des tableaux passe par l’usage des boucles.

var tableau = [10,15,42]; // un tableau
for(i=0;i<tableau.length;i++){
console.log(i+'--->'+tableau[i]);
}
// 0--->10
// 1--->15
// 2--->42

Application avec GSAP

Je créé un tableau par point d’un trajet :

var fr = [0,0];
var be = [0,-200];
var ch = [-200,-200];
var es = [0,200];
var uk = [-100,-100];

Je créé un tableau pour un trajet en combinant les deux :

var e32 = [be,ch,uk,es,fr]; // oui c'est possible !
console.log(e32[0][1]); // e[32][0] donne be et be[1] donne -200
À cette étape, il faut ouvrir la console de Chrome et faire des tests ! 
var tl32 = new TimelineMax({repeat:-1});
 
var fr = [0,0];
var be = [0,-200];
var ch = [-200,-200];
var es = [0,200];
var uk = [-100,-100];
 
var e32 = [be,ch,uk,es,fr];
 
for(i=0;i<e32.length;i++){
  tl32.to('#e32',.5,{
    x:e32[i][0],
    y:e32[i][1]
  });
}

See the Pen tableau + gsap + tl by Benoît Wimart (@benoitwimart) on CodePen.0