나는 다음과 같이 트윈 일련의를 수행하는 timelinemax 사용하고 TimelineMax

Question

에서 현재의 애니메이션 시퀀스의 진행 상황을 얻는 방법 : 각 TweenMax 인스턴스가 실행되는 동안

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 }, 
    })); 
}); 

, 내가 얻을 수 있기를 원하는 그 진행. 따라서 내 타임 라인에 tweenmax 애니메이션이 10 개있는 경우 업데이트시 각 애니메이션의 진행률 (0에서 1까지의 비율)을 가져 오려고합니다.

timelinemax에는 progress 이벤트가 있지만 각 애니메이션별로 시간이 분할되지는 않습니다.

현재 애니메이션의 진행 상태를 어떻게 알 수 있습니까?

---

ES6 + 방법

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}"] 
    })); 
}); 

에게

ES5 방법

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

:

Answer 1

그냥 각 인스턴스의 진행 상황을 추적 할 onUpdate 콜백을 사용