這篇文章主要介紹了詳解tween.js的使用方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧
前面的話
TweenJS提供了一個簡單但強大的漸層介面。它支援漸變的數字物件屬性&CSS樣式屬性,並允許連結補間動畫和行動結合起來,創造出複雜的序列。本文將詳細介紹tween.js的使用
概述
#tween.js允許以平滑的方式修改元素的屬性值。只需要告訴tween想修改什麼值,以及動畫結束時它的最終值是什麼,動畫花費多少時間等信息,tween引擎就可以計算從開始動畫點到結束動畫點之間值,來產生平滑的動畫效果
例如,假設有一個物件position,它的座標為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);
到這裡只是創建了tween對象,需要激活它,讓它開始動畫:
##
// And set it to start tween.start();
animate(); function animate() { requestAnimationFrame(animate); // [...] TWEEN.update(); // [...] }
#
tween.onUpdate(function() { console.log(this.x); });
開始動畫
animate(); function animate() { requestAnimationFrame(animate); // [...] TWEEN.update(); // [...] }
TWEEN.update(100);
#
var currentTime = player.currentTime; TWEEN.update(currentTime);
#控制動畫
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();
全域方法
【TWEEN.update(time)】該方法用於所有被啟動的tweens,如果time沒有被指定,將使用當前時間。 【TWEEN.getAll 和 TWEEN.removeAll】這兩個方法用於取得被啟動的tweens數組的一個引用,或從數組中刪除所有tweens。 【TWEEN.add(tween) 和TWEEN.remove(tween)】用於新增一個tween,或移除一個tween
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中文網其他相關文章!