이 TweenJS 코드를 설명하십시오.

Question

CreateJS의 초보자이고이 예제 코드를 사용하고 있지만 코드 exaplaination으로 코드가 없다는 것을 이해하지는 못합니다.

createjs.Tween.get(circle, { loop: true }) 
    .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)) 
    .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)) 
    .to({ alpha: 0, y: 225 }, 100) 
    .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)) 
    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2)); 

사람이 단계에서 나를 위해 그것을 please.Step 설명 할 수 : 아래 코드는 하나입니다.

좋습니다.

Answer 1

circle 개체의 트윈을 만듭니다. 지침을 통해이 반복됩니다 :

createjs.Tween.get(circle, { loop: true })

트윈 호출이 "체인"하는 방법을 추가하여, 그래서 그것을 순서대로 실행됩니다. 엄밀히 말하면, 각 메소드는 트윈에 대한 참조를 반환하기 때문에 순서대로 무리를 호출 할 수 있습니다. 코드의 줄 바꿈은 더 읽기 쉽게하지만, 기본적으로 :

tween.to(values).to(values).to(values); 

첫 번째 트윈은 1000 밀리 초 애니메이션 ~ 400 원의 x 위치를 설정합니다. 그것은 사용자 정의 값을 가지고 그것에 쉽게있다. 자세한 내용은 TweenJS Ease class을 확인하십시오.

.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)) 

는 제 애니메이션 후에는 약간 다른 용이,은 500ms 동안 alpha 및 y 값을 설정한다.

.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)) 

나머지는 의미가 있습니다.

.to({ alpha: 0, y: 225 }, 100) 
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)) 
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2)); 

당신은 함수를 호출하거나, set 트위닝되지 않는 트윈 대상의 다른 특성을 변경하는 등의 트윈 call() 등의 다른 방법도 사슬있다.

var tween = createjs.Tween.get(circle, { loop: true }); 
tween.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)); 
tween.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)); 
tween.to({ alpha: 0, y: 225 }, 100); 
tween.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)); 
tween.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2)); 

건배 : 그냥 참조

이이 같은 전통적인 무언가와 동일합니다.