TWEEN 모듈의 다양한 트윈 함수

다양한 트윈 함수 소개

트윈을 조작할 수 있는 여러 함수들에 대해 안내합니다.

트윈 모듈에는 단순히 트윈을 생성하고 시작하는 것 이외의 조작을 할 수 있는 함수들이 존재합니다.

.startFromCurrentValues()

트윈을 시작하는 다른 방법 중 하나입니다. start와 달리 트윈의 대상이 되는 객체가 현재 가진 값을 시작점으로 설정합니다.

// startFromCurrentValues Example
 
let upTween;
 
function Start() {
  const startPosition = { x: 0, y: 0, z: 0 };
 
  upTween = new TWEEN.Tween(startPosition);
 
  upTween
    .to({ y: "+1" }, 1000)
 
    .onUpdate(() => {
      this.position.y = startPosition.y;
    });
}
 
// compare this two function in your project
 
function OnKeyDown(event) {
  if (event.code === "KeyM") {
    upTween.start();
  }
}
 
function OnKeyDown(event) {
  if (event.code === "KeyM") {
    upTween.startFromCurrentValues();
  }
}

.stop()

실행한 트윈을 멈추고 싶은 경우 사용할 수 있습니다.

// stop Example
 
let upTween;
 
function Start() {
  const startPosition = { x: 0, y: 0, z: 0 };
 
  upTween = new TWEEN.Tween(startPosition);
 
  upTween
    .to({ y: "+5" }, 1000)
 
    .onUpdate(() => {
      this.position.y = startPosition.y;
    });
}
 
function OnKeyDown(event) {
  if (event.code === "KeyM") {
    upTween.start();
  }
 
  // if you press KeyN then this object`s tween stops.
 
  if (event.code === "KeyN") {
    upTween.stop();
  }
}

.repeat()

원하는 횟수만큼 트윈을 반복하고싶은 경우 사용할 수 있습니다.

// repeat Example
 
let upTween;
 
function Start() {
  const startPosition = { x: 0, y: 0, z: 0 };
 
  upTween = new TWEEN.Tween(startPosition);
 
  upTween
    .to({ y: startPosition.y + 1 }, 1000)
 
    .onUpdate(() => {
      this.position.y = startPosition.y;
    });
}
 
function OnKeyDown(event) {
  // The tween definded in Start function repeats 3 times and stops.
 
  if (event.code === "KeyM") {
    upTween.repeat(3).start();
  }
}

.chain()

여러 개의 트윈을 연속적으로 실행하고싶은 경우 사용할 수 있습니다.

// chain Example
 
let upTween;
 
let downTween;
 
function Start() {
  const startPosition = { x: 0, y: 0, z: 0 };
 
  upTween = new TWEEN.Tween(startPosition);
 
  upTween
    .to({ y: "+3" }, 1000)
 
    .onUpdate(() => {
      this.position.y = startPosition.y;
    });
 
  downTween = new TWEEN.Tween(startPosition);
 
  downTween
    .to({ y: "-3" }, 1000)
 
    .onUpdate(() => {
      this.position.y = startPosition.y;
    });
}
 
function OnKeyDown(event) {
  // The downTween runs immediately after the upTween ends.
 
  if (event.code === "KeyM") {
    upTween.chain(downTween).start();
  }
}

.delay()

트윈의 실행을 특정한 시간만큼 유예하고 싶은 경우 사용할 수 있습니다.

// delay Example
 
let upTween;
 
let downTween;
 
function Start() {
  const startPosition = { x: 0, y: 0, z: 0 };
 
  upTween = new TWEEN.Tween(startPosition);
 
  upTween
    .to({ y: "+3" }, 1000)
 
    .onUpdate(() => {
      this.position.y = startPosition.y;
    });
 
  downTween = new TWEEN.Tween(startPosition);
 
  downTween
    .to({ y: "-3" }, 1000)
 
    .onUpdate(() => {
      this.position.y = startPosition.y;
    });
}
 
function OnKeyDown(event) {
  // The tween runs 1000 milliseconds after start is executed.
 
  if (event.code === "KeyM") {
    upTween.delay(1000).start();
  }
}

트윈 생성하고 실행하기 트윈 easing 함수 소개