Comment obtenir la progression de la séquence d'animation en cours dans TimelineMax

Question

J'utilise timelinemax pour effectuer une série de pré-adolescents comme suit:

this.backgroundColorTimeline = new TimelineMax({ 
    repeat: -1, 
    yoyo: true, 
    onUpdate:this.updateTimeline, 
}); 

palette.bg.forEach((paletteColor) => { 
    this.backgroundColorTimeline.add(TweenMax.to(this.bg, settings.colorAnimTime, { 
     easel: { tint: paletteColor }, 
    })); 
}); 

Bien que chaque instance TweenMax est en cours d'exécution, je veux être en mesure d'obtenir son le progrès. Donc, si mon scénario a 10 animations tweenmax, je veux que la progression de chaque animation (comme une échelle de 0 à 1) soit mise à jour.

Je vois que timelinemax a un événement progress, mais cela ne diviserait pas le temps de chaque animation.

Comment obtenir la progression de l'animation en cours?

Answer 1

Il suffit d'utiliser la fonction de rappel onUpdate pour suivre les progrès de chaque instance:

ES5 Way

function getProgress() { 
    var currProgress = this.progress(); 
} 
palette.bg.forEach((paletteColor) => { 
    this.backgroundColorTimeline.add(TweenMax.to(this.bg, settings.colorAnimTime,{ 
     easel: { tint: paletteColor }, 
     onUpdate: getProgress 
    })); 
}); 

---

ES6 + Way

const getProgress = t { 
    const currProgress = t.progress(); 
} 
palette.bg.forEach((paletteColor) => { 
    this.backgroundColorTimeline.add(TweenMax.to(this.bg, settings.colorAnimTime,{ 
     easel: { tint: paletteColor }, 
     onUpdate: getProgress, onUpdateParams: ["{self}"] 
    })); 
});