TWEEN

TWEEN은 Three.js 라이브러리에서 제공하는 클래스로, 애니메이션을 쉽게 만들기 위해 사용됩니다. TWEEN을 사용하면 객체의 속성을 시간에 따라 부드럽게 변화시킬 수 있습니다. 주로 페이드 인, 페이드 아웃, 슬라이드, 회전 등의 애니메이션을 구현할 때 유용합니다.

 

주요 기능

• Tween.js: Three.js의 일부로 제공되며, TWEEN.Tween와 TWEEN.TweenGroup 클래스를 포함합니다.
• TWEEN.Tween: 개별 객체의 속성을 애니메이션화하는 클래스입니다.
• TWEEN.TweenGroup: 여러 개의 TWEEN.Tween을 그룹화하여 관리할 수 있는 클래스입니다.

import { TWEEN } from 'three';

// 원본 이미지 요소 선택
const image = document.querySelector('img');

// Tween 생성
const tween = new TWEEN.Tween({ width: 100, height: 100 })
  .to({ width: 200, height: 200 }, 2000) // 2초 동안 애니메이션
  .onUpdate(function() {
    image.style.width = this.width + 'px';
    image.style.height = this.height + 'px';
  });

// 애니메이션 시작
tween.start();

이 코드는 이미지의 크기를 2초 동안 부드럽게 100px에서 200px로 변화시킵니다.

 

주요 포인트

• TWEEN.Tween: 객체의 속성을 시간에 따라 변화시킵니다.
• TWEEN.TweenGroup: 여러 개의 TWEEN.Tween을 그룹화하여 관리합니다.
• onUpdate(): 애니메이션의 각 프레임마다 실행되는 함수로, 속성을 업데이트합니다.