tween.js의 사용 예에 ​​대한 자세한 설명

이 글에서는 주로 tween.js 사용법에 대한 자세한 설명을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다.

위에서 언급했듯이

TweenJS는 간단하지만 강력한 그래디언트 인터페이스를 제공합니다. 그라디언트 디지털 개체 속성 및 CSS 스타일 속성을 지원하고 연결된 트위닝된 애니메이션과 작업을 결합하여 복잡한 시퀀스를 만들 수 있습니다. 이번 글에서는 tween.js의 사용법을 자세히 소개하겠습니다

Overview

tween.js를 사용하면 요소의 속성값을 원활하게 수정할 수 있습니다. 수정하려는 값, 애니메이션 종료 시 최종 값, 애니메이션 소요 시간 및 기타 정보를 트윈 엔진에 알려주기만 하면 됩니다. 트윈 엔진은 애니메이션 시작 지점에서 애니메이션 종료까지의 값을 계산할 수 있습니다.

예를 들어 좌표가 x와 y인 개체 위치가 있다고 가정합니다.

var position = { x: 100, y: 0 }

x 값을 100에서 200으로 변경하려면 다음을 수행하세요.

// Create a tween for position first
var tween = new TWEEN.Tween(position);
 
// Then tell the tween we want to animate the x property over 1000 milliseconds
tween.to({ x: 200 }, 1000);

여기서 생성하세요. 트윈 객체가 있으면 이를 활성화하고 애니메이션을 시작해야 합니다.

// And set it to start
tween.start();

마지막으로 애니메이션 효과를 부드럽게 하려면 TWEEN을 호출해야 합니다. .update 동일한 루프 애니메이션의 메소드. 코드는 다음과 같습니다.

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

이 작업을 수행하면 활성화된 모든 트윈이 업데이트되고 position.x는 1초(예: 1000ms)에 200이 됩니다.

onUpdate 콜백 함수를 사용하여 결과를 콘솔에 인쇄할 수도 있습니다.

tween.onUpdate(function() {
  console.log(this.x);
});

이 함수는 트윈이 업데이트될 때마다 호출됩니다. 그 빈도는 여러 요인에 따라 달라집니다. 예를 들어, 컴퓨터나 장치의 실행 속도에 따라

Start animation

Tween.js 자체가 실행되지 않을 경우, 업데이트 메소드를 통해 언제 실행을 시작할지 명시적으로 알려줘야 합니다. 애니메이션 메인 루프에서는 이 방법을 사용하는 것이 좋습니다. requestAnimationFrame 메소드

animate();
 
function animate() {
  requestAnimationFrame(animate);
  // [...]
  TWEEN.update();
  // [...]
}

를 호출하면 좋은 이미지 성능을 얻을 수 있습니다. 여기서는 매개변수 없는 호출 메소드가 사용되며, update 메소드는 마지막 애니메이션의 실행 시간을 얻기 위해 현재 시간을 명확히 합니다.

업데이트 방법에 시간을 지정할 수도 있습니다.

TWEEN.update(100);

위 설명의 의미: 업데이트 시간 = 100밀리초. 이 접근 방식을 사용하면 코드에서 시간에 따라 변하는 모든 함수를 식별할 수 있습니다. 예를 들어 애니메이션이 시작되었고 모든 애니메이션이 동시에 진행되도록 하려면 애니메이션 코드를 다음과 같이 변경해야 합니다.

var currentTime = player.currentTime;
TWEEN.update(currentTime);

Control animation

【시작 및 중지】

Tween.start 및 Tween.stop을 사용하여 트윈 애니메이션의 시작과 끝을 각각 제어합니다

끝나고 시작되지 않은 애니메이션의 경우 Tween.stop 메서드가 작동하지 않습니다. Tween.start 메소드는 시간 매개변수도 수신합니다. 이 매개변수를 사용하면 트윈 애니메이션은 이 시간만큼 지연된 후 애니메이션을 시작합니다. 그렇지 않으면 애니메이션이 즉시 시작됩니다

【update】

TWEEN.update 메소드를 통해 애니메이션 업데이트를 수행할 수 있습니다.

【chain】

예를 들어 여러 줄을 만드는 경우: 한 애니메이션이 다른 애니메이션이 끝난 후 시작됩니다 . 이는 체인 방식을 통해 달성할 수 있습니다. 다음 코드에서는 tweenA

tweenA.chain(tweenB);

이후에 tweenB가 애니메이션을 시작합니다. 다음과 같이 무한 루프 애니메이션을 만들 수 있습니다.

tweenA.chain(tweenB);
tweenB.chain(tweenA);

【repeat】

루프 애니메이션을 만들 경우 체인을 사용할 수 있습니다. 이를 달성하려면 더 좋은 방법은 반복 방법을 사용하는 것입니다. 반복하려는 횟수를 설명하는 매개변수를 받습니다.

tween.repeat(10); // repeats 10 times and stops
tween.repeat(Infinity); // repeats forever

【yoyo】

이 기능은 반복 방법을 사용할 때만 작동합니다. 활성화되면 트윈의 효과는 요요볼 효과와 유사합니다. 그 효과는 애니메이션이 시작 또는 끝에서 반대 방향으로 튀어오르는 것입니다

[지연]

delay 방법은 애니메이션 사이의 지연을 제어하는 ​​데 사용됩니다

tween.delay(1000);
tween.start();

global 방법

다음 방법 TWEEN의 전역 객체에 정의되어 있으며 업데이트 메서드를 제외한 대부분의 메서드는 사용되지 않습니다.

[TWEEN.update(time)]

이 메서드는 활성화된 모든 트윈에 사용됩니다. 현재 시간.

【TWEEN.getAll 및 TWEEN.removeAll】

이 두 가지 메서드는 활성화된 트윈 배열에 대한 참조를 가져오거나 배열에서 모든 트윈을 제거하는 데 사용됩니다.

【TWEEN.add(tween) 및 TWEEN.remove(tween)】

은 활성화된 트윈에 트윈을 추가하거나 트윈을 제거하는 데 사용됩니다.

easing 함수

tween.js는 일부 사용 가능한 easing을 제공합니다. 기능. 사용 가능한 기능은 선형, 2차, 3차, 4차, 5차, 사인파, 지수, 원형, 탄성, 백 및 바운스입니다. easing 유형은 In, Out, InOut으로 구분됩니다

tween.js에서 제공하는 easing 기능을 사용할 수 있을 뿐만 아니라 easing 기능을 맞춤 설정할 수도 있습니다. 하지만 다음 규칙을 따라야 합니다

1. 매개변수를 받아야 합니다

2. 입력 매개변수에 따라 값을 반환해야 합니다

감속/가속 함수는 속성 수에 관계없이 각 트윈이 업데이트될 때마다 호출됩니다. 변경되었습니다. 그런 다음 결과는 초기 값으로 사용됩니다

easedElapsed = easing(k);
for each property:
  newPropertyValue = initialPropertyValue + propertyDelta * easedElapsed;

下面是一个使用Math.floor来做easing效果的例子：

function tenStepEasing(k) {
  return Math.floor(k * 10) / 10;
}

可以在tween 这样使用它

tween.easing(tenStepEasing);

回调函数

另外一个有用的特性是可以在每次tween循环周期的指定时间点调用自定义的函数。

例如：假设想使一些不能直接修改参数的对象执行动画，要访问该对象的参数只能通过setter方法，可以通过update方法的回调函数来设置新的setter值

var trickyObjTween = new TWEEN.Tween({
  propertyA: trickyObj.getPropertyA(),
  propertyB: trickyObj.getPropertyB()
})
  .to({ propertyA: 100, propertyB: 200 })
  .onUpdate(function() {
    this.setA( this.propertyA );
    this.setB( this.propertyB );
  });

或者如果想确认tween动画开始后某个对象指定状态下的某个值，可以通过start回调来获取它：

var tween = new TWEEN.Tween(obj)
  .to({ x: 100 })
  .onStart(function() {
    this.x = 0;
  });

【onStart】

tween开始动画前的回调函数。

【onStop】

tween结束动画后的回调函数。

【onUpdate】

在tween每次被更新后执行。

【onComplete】

在tween动画全部结束后执行。

위 내용은 tween.js의 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!