前面的話

TweenJS提供了一個(gè)簡單但強(qiáng)大的漸變界面。它支持漸變的數(shù)字對(duì)象屬性&CSS樣式屬性，并允許鏈接補(bǔ)間動(dòng)畫和行動(dòng)結(jié)合起來，創(chuàng)造出復(fù)雜的序列。本文將詳細(xì)介紹tween.js的使用

 概述

tween.js允許以平滑的方式修改元素的屬性值。只需要告訴tween想修改什么值，以及動(dòng)畫結(jié)束時(shí)它的最終值是什么，動(dòng)畫花費(fèi)多少時(shí)間等信息，tween引擎就可以計(jì)算從開始動(dòng)畫點(diǎn)到結(jié)束動(dòng)畫點(diǎn)之間值，來產(chǎn)生平滑的動(dòng)畫效果

例如，假設(shè)有一個(gè)對(duì)象position，它的坐標(biāo)為 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);

到這里只是創(chuàng)建了tween對(duì)象，需要激活它，讓它開始動(dòng)畫：

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

最后為了平滑動(dòng)畫效果，需要在同一個(gè)循環(huán)動(dòng)畫中調(diào)用TWEEN.update方法。代碼如下：

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

這個(gè)動(dòng)作將會(huì)更新所有被激活的tweens，在1秒鐘（例如1000ms）position.x 將變?yōu)?00。

也可以使用onUpdate回調(diào)函數(shù)將結(jié)果打印到控制臺(tái)上

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

這個(gè)函數(shù)在每次tweens被更新時(shí)都被調(diào)用。它的出現(xiàn)頻次依賴于很多因素。例如：依賴于你的電腦或設(shè)備的運(yùn)行速度

開始動(dòng)畫

Tween.js本身不會(huì)運(yùn)行，需要通過update方法明確的告訴它什么時(shí)候開始運(yùn)行。推薦在動(dòng)畫主循環(huán)中使用該方法?？梢酝ㄟ^調(diào)用requestAnimationFrame方法來獲得良好的圖像性能

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

這里使用無參數(shù)調(diào)用方式，update方法將明確當(dāng)前時(shí)間，以便于獲取上一次動(dòng)畫的執(zhí)行時(shí)間。

也可以為update方法明確一個(gè)時(shí)間：

TWEEN.update(100);

上面語句的意思是說：update的時(shí)間=100毫秒?？梢允褂眠@種方法來明確代碼中所有隨時(shí)間變化的函數(shù)。例如，動(dòng)畫已經(jīng)開始，想所有動(dòng)畫都同步進(jìn)行，animate代碼改成這樣：

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

控制動(dòng)畫

【start和stop】

Tween.start和Tween.stop分別用于控制tween動(dòng)畫的開始和結(jié)束

對(duì)于已經(jīng)結(jié)束和沒有開始的動(dòng)畫，Tween.stop方法不起作用。Tween.start方法同樣接收一個(gè)時(shí)間參數(shù)。如果使用了該參數(shù)，tween動(dòng)畫將在延時(shí)該時(shí)間數(shù)后才開始動(dòng)畫。否則它將立刻開始動(dòng)畫

【update】

可以通過TWEEN.update方法來執(zhí)行動(dòng)畫的更新

【chain】

如果你制作多個(gè)多行，例如：一個(gè)動(dòng)畫在另一個(gè)動(dòng)畫結(jié)束后開始。可以通過chain方法來使實(shí)現(xiàn)。如下代碼，tweenB 在 tweenA 之后開始動(dòng)畫

tweenA.chain(tweenB);

可以像下面這樣制作一個(gè)無限循環(huán)的動(dòng)畫：

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

【repeat】

如果你制作循環(huán)動(dòng)畫可以使用chain來實(shí)現(xiàn)，但是更好的方法是使用repeat方法。它接收一個(gè)用于描述想循環(huán)多少次的參數(shù)

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

【yoyo】

這個(gè)函數(shù)只在使用repeat方法時(shí)起作用。當(dāng)它被激活時(shí)，tween的效果類似yoyo球效果。該效果是動(dòng)畫會(huì)在開始或結(jié)束處向反方向反彈

【delay】

delay方法用于控制動(dòng)畫之間的延時(shí)

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

全局方法

以下的方法定義在 TWEEN 的全局對(duì)象中，其中大多數(shù)方法都用不上，除了update方法：

【TWEEN.update(time)】

該方法用于所有被激活的tweens，如果time沒有被指定，將使用當(dāng)前時(shí)間。

【TWEEN.getAll 和 TWEEN.removeAll】

這兩個(gè)方法用于獲取被激活的tweens數(shù)組的一個(gè)引用，或從數(shù)組中刪除所有tweens。

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

用于向被激活的tweens中添加一個(gè)tween，或移除一個(gè)tween

easing函數(shù)

tween.js提供了一些可用的easing函數(shù)。可用函數(shù)有：Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back 和 Bounce。easing 類型分為: In, Out 和 InOut

不但可以使用tween.js提供的easing函數(shù)，還可以自定義easing函數(shù)。但必須遵守下面的規(guī)則

1、它必須接收一個(gè)參數(shù)

2、它必須基于輸入?yún)?shù)返回一個(gè)值

easing函數(shù)僅在每個(gè)tween每次被更新時(shí)調(diào)用，而不管有多少屬性被改變。結(jié)果隨后會(huì)被用于初始值

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

下面是一個(gè)使用Math.floor來做easing效果的例子：

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

可以在tween 這樣使用它

tween.easing(tenStepEasing);

回調(diào)函數(shù)

另外一個(gè)有用的特性是可以在每次tween循環(huán)周期的指定時(shí)間點(diǎn)調(diào)用自定義的函數(shù)。

例如：假設(shè)想使一些不能直接修改參數(shù)的對(duì)象執(zhí)行動(dòng)畫，要訪問該對(duì)象的參數(shù)只能通過setter方法，可以通過update方法的回調(diào)函數(shù)來設(shè)置新的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 );
  });

或者如果想確認(rèn)tween動(dòng)畫開始后某個(gè)對(duì)象指定狀態(tài)下的某個(gè)值，可以通過start回調(diào)來獲取它：

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

【onStart】

tween開始動(dòng)畫前的回調(diào)函數(shù)。

【onStop】

tween結(jié)束動(dòng)畫后的回調(diào)函數(shù)。

【onUpdate】

在tween每次被更新后執(zhí)行。

【onComplete】

在tween動(dòng)畫全部結(jié)束后執(zhí)行。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論