Detailed explanation of usage examples of tween.js

This article mainly introduces the detailed explanation of how to use tween.js. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Previous words

TweenJS provides a simple but powerful gradient interface. It supports gradient digital object properties & CSS style properties, and allows linked tweened animations and actions to be combined to create complex sequences. This article will introduce the use of tween.js in detail

Overview

tween.js allows to modify the attribute values ​​​​of elements in a smooth way. You only need to tell tween what value you want to modify, what its final value will be when the animation ends, how long the animation takes, and other information. The tween engine can calculate the value from the start animation point to the end animation point to produce a smooth animation effect.

For example, suppose there is an object position whose coordinates are x and y:

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

If you want to change the value of x from 100 to 200, just You need to do this:

// 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);

Here you just created the tween object, you need to activate it and let it start animation:

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

Finally, in order to smooth the animation effect, the TWEEN.update method needs to be called in the same loop animation. The code is as follows:

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

This action will update all activated tweens, and position.x will become 200 in 1 second (for example, 1000ms).

You can also use the onUpdate callback function to print the results to the console

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

This function is called every time the tweens are updated. Its frequency depends on many factors. For example: depends on the running speed of your computer or device

Start animation

Tween.js itself will not run and needs to be explicitly told through the update method When will it start running? It is recommended to use this method in the animation main loop. You can obtain good image performance by calling the requestAnimationFrame method

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

The parameterless calling method is used here, and the update method will clarify the current time in order to obtain the execution time of the last animation .

You can also specify a time for the update method:

TWEEN.update(100);

The above statement means: update time = 100 milliseconds. You can use this approach to identify all time-varying functions in your code. For example, if the animation has started and you want all animations to proceed simultaneously, change the animate code to this:

##

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

Control animation

tweenA.chain(tweenB);

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

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

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

Global methods

easing function

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动画全部结束后执行。

The above is the detailed content of Detailed explanation of usage examples of tween.js. For more information, please follow other related articles on the PHP Chinese website!