트윈 라이프사이클 후크

트윈 라이프사이클

다음의 함수들을 트윈의 실행 사이클 중간에 직접 정의한 함수들을 사용할 수 있게 해주는 함수들입니다.

.onStart()

.onStart(callback)

트윈이 시작할 때 함수를 실행하도록 할 수 있습니다.

// onStart Example - GUI
let opacityTween;
 
function Start() {
  this.hide();
 
  const initialProperty = { opacity: 1 };
  opacityTween = new TWEEN.Tween(initialProperty);
  opacityTween.to({ opacity: 0 });
  // GUI shows when tween starts
  opacityTween.onStart(() => {
    this.show();
  });
}
 
function OnKeyDown(event) {
  if (event.code === "KeyM") {
    opacityTween.start();
  }
}

.onUpdate()

.onUpdate(callback)

트윈의 대상이 되는 객체의 값이 업데이트 될 때마다 함수를 실행하도록 할 수 있습니다.

// onUpdate Example - GUI
let opacityTween;
 
function Start() {
  this.hide();
 
  const initialProperty = { opacity: 1 };
  opacityTween = new TWEEN.Tween(initialProperty);
  opacityTween.to({ opacity: 0 });
  opacityTween.onStart(() => {
    this.show();
  });
  // opacity changes when the tween value is updated.
  opacityTween.onUpdate(() => {
    this.material.opacity = initialProperty.opacity;
  });
}
 
function OnKeyDown(event) {
  if (event.code === "KeyM") {
    opacityTween.start();
  }
}

.onComplete()

.onComplete(callback)

트윈이 끝날 때 함수를 실행하도록 할 수 있습니다.

// onComplete Example - GUI
let opacityTween;
 
function Start() {
	this.hide();
 
	const initialProperty = {opacity: 1}
	opacityTween = new TWEEN.Tween(initialProperty);
	opacityTween.to({opacity: 0})
	opacityTween.onStart(() => {this.show()});
	opacityTween.onUpdate(() => {this.material.opacity = initialProperty.opacity});
	// GUI hides when tween ends
	opacityTween.onComplete(() => {this.hide()});
}

function OnKeyDown(event) {
    if (event.code === "KeyM") {
        opacityTween.start();
    }
}

트윈 easing 함수 소개 API 익스텐션