gTween:轻便的as3缓动类库分享
前不久做一个作品,想加入一些复杂点的缓动效果,想到gTween类【gTween类下载地址 】,以前学习过一段时间,现在发现很多忘记了(发现程序学起来好容易忘记呀),虽然是很多内容曾经学过,可重新学起来却很慢(呵呵,主要可能还是因为英语不是非常好),虽然很难懂,但是还是觉得别扭,所以也翻译了出来,和大家学习分享,如果那些地方翻译不好,有懂的朋友帮忙指出呀。
其实发现很多好得类库,可是教程好像都是English的,学习的效率大打折扣,希望能够为一些朋友有点帮助啊
gTween: 提供给as3开发者的缓动类库Programmatic Tweening for AS3 Developers
有许多非常好得缓动引擎,我是一个jack的TweenLite类库狂热爱好者(在将来他还将增加一些不可思议的新特征)。然而,这些类库不是一个十分符合我们和团队的需要,我需要一个具备体积小,快速,灵活,基于as3的类库,结果我选择了gTween。gTween是一个小的(4.5kb),快速的(1500 instances, 0.5s duration, ~25fps),实例基于缓动类,有许多选择和性能。从下面你可以学习gTween的许多重要特征。
这当然不是试图取代任何现有的的缓动引擎。相反,它只是为了试图授予开发团队管理缓动程序的权利。
目前,我已将它作为测试版发布。它已经进过了一些初略的测试,但是,作为一个性能如此强大的类库,我敢保证,它仍然有许多我们没有发现的bugs和优点。同样,我征求补充和修改,请将修改和补充输入
到API中(包括特定属性或方法的名称),因此API有可能在以后有所改变。
基于开发者Developer Oriented (consistent AS3 experience)
gTween是完全针对as3开发者建立的类库,它使用基于实例的开发模型,而不是基于静态接口。同样,它基于事件模型而不是使用回调函数。这些为使用缓动的as3开发者提供了一个友好,一贯开发界面。
这些是一个建立缓动效果的简单例子,它侦听完成事件。
var myTween:GTween = new GTween(mySprite, 2, {x:200});
myTween.addEventListener(Event.COMPLETE, handleTweenComplete);
实例既可以是引用的又可以是短暂的,前者允许在运行中改变值和行为(参考Sequencing),后者与智能资源管理逻辑共同起作用以确保缓动不被收集直到运行结束(参考Resource Management)。
引用实例和短暂实例对比例子:
//创建一个名为myTween 的引用,以便在后面能够修改
var myTween:GTween = new GTween(mySprite, 2, {x:200});
//运行一次,然后被垃圾收集器收集n
new GTween(mySprite1, 2, {x:400});
gTween能够运用到任何一个对象的任何数字属性,你可以将它运用到声音上来产生缓动效果,也可以用来改变AIR窗口的大小,或是自定义对象类型的”foo”值,就像使用它来使Sprite产生x属性的缓动一样简单。
缓动代理Proxy Tweening
gTween 提供一个唯一的代理属性,它使你运用缓动在目的值产生的效果和作用在目标对象上的效果一样,代理对象有效地代表目标对象。
下面例子展示了如何使用代理使目标对象向右移动100px:
myTween.proxy.x += 100;
在上面的例子中,代理将重新从目标对象得到x值(如果它在缓动中没有作为一个目的值存在),加上100,然后将作为一个目的值重新设置回。
这是一个非常强大的特征,花少量时间就能够学会使用。可以在API文档找到代理清单更多的信息和例子。
中断缓动(在运行中作出更改)Interrupting Tweens (make changes on the fly)
使用gTween,你能够在缓动动画播放的时候修改它,它将试图适应这些更改。在滑入动画执行完成之前用户关闭一个面板?使用reverse(),它将滑回接近它当前的位置。如果需要移动一个sprite到不同的位置,或者在缓动动画运行的时候加入一个淡出的效果?仅需要在运行时调整它的值就可以了。
这个简单的例子向你展示如何使sprite影片移动到用户在舞台上单击的位置。你一定注意到,用户可以在任何时候单击鼠标,而缓动动画将平稳地自我调节以最终到达目的地。
var myTween:GTween = new GTween(mySprite,1);
stage.addEventListener(MouseEvent.CLICK,handleClick);
function handleClick(evt:MouseEvent):void {
myTween.proxy.x = mouseX;
myTween.proxy.y = mouseY;
}
你也可以适用end()或beginning()使缓动动画立即跳到动画的结尾或开始。调用end(true)将递归结束所有序列动画。
序列动画(子动画,下一个动画)Sequencing Tweens (child tweens, and nextTween)(版本Beta 4)
gTween提供了三个特征,允许使多个动画进行先后排序:child tweens, delay, and nextTween。
使用addChild,你可以联合多个动画以作为原动画的子动画。当子动画运行时,它们将和父(原)动画保持同步。你甚至可以选择同步延误,开始,结束或持续时间。
你也可以使用nextTween指定当一个动画结束时另一个要播放的动画,和指定另一个动画在播放之前需要等待的时间。
下面的例子演示了同步播放两个动画,在等待两秒后随即播放第三个动画。
var myTween1:GTween = new GTween(target1,3,{x:20});
var myTween2:GTween = new GTween(target2,0,{x:200});
myTween1.addChild(myTween2,GTween.DURATION);
var myTween3:GTween = new GTween(target3,3,{y:50});
myTween3.delay = 2;
myTween1.nextTween = myTween3;
计时模式(帧,时间,混合) Timing Modes (frame, time, or hybrid)
gTween另一个特色是支持多种计时模式。你可以使用通用的时间计时模式,帧频计时模式,和混合计时模式。
在”time“计时模式,所有的持续时间和位置使用秒指定,和使用一个可以配置的频率(例如.每50毫秒)更新和运行.这提供一个更加严格的控制,但是会占用更多的CPU,使CUP状况出现更大的起伏。
在”frame”计时模式下,所有的持续时间和位置使用帧频指定,在每一帧更新和运行,这种模式占用的CUP较少,还允许你的动画与时间轴动画同步,但是在高CUP占有时,全面的持续时间将难以预料。
在”hybrid”计时模式下,在每一帧进行更新,但是允许你使用秒指定持续时间。在每一帧,动画将根据上一次更新过去的时间调整它的位置。
GTween.timingMode = GTween.TIME;
因为开发者在项目中不太可能改变,它被指定为一个类级别的属性。无论如何,gTween将继续使用旧的设置和旧的缓动动画,它允许你在任何时候更改计时模式。
暂停所有Pause All
能够轻易地使所有的缓动动画暂停。当用户要暂停的时候,暂停你项目中所有的sprites,或者在你打开一个对话框的时候暂停所有的转换效果。
gTween 提供一个类级别的pauseAll属性,它将停止所有的缓动动画而不会影响每一个影片暂停前的特征!
myTween.paused = false;
GTween.pauseAll = true; // pause ALL tweens.
trace(myTween.paused); // false
强大的事件Robust Events
gTween提供三种内建的事件。激活(activate)事件让你知道什么时候缓动动画将开始运行,初始化(init)事件当迟滞完成并动画开始时触发,改变(change)事件在缓动动画更新时触发,完成(complete)事件在影片结束时触发。
还不够?gTween允许你在缓动动画中动态添加定制点并在缓动动画到达定制点后出发事件。下面的例子展示一个持续事件为3秒的缓动动画在经过中点(1.5秒时),找到"halfway" 字符(版本Beta 4)。
var myTween:GTween = new GTween(target1, 3, {alpha:1});
myTween.addProgressPoint(1.5,"halfway");
myTween.addEventListener(GTween.PROGRESS,onProgress);
function onProgress(evt:Event):void {
trace(String(myTween.lastProgressPoint));
}
注意:你可以在到达定制点时使用任何调用一种数据类型,字符标签,一个到达定制点时调用的函数,运行另一个缓动动画,任何你想要的。
例子:
import com.gskinner.motion.*; //使用类前需要导入用到的类,*通配符代表导入包内所有的内
var myTween:GTween = new GTween(mySprite1, 6, {x:400}); //创建一个名为myTween 的引用,以便在后面能够修改
myTween.addProgressPoint(2,"point1"); //在2秒的时候设置一个定制点
myTween.addProgressPoint(4," point2"); //在4秒时设置另一个定制点
myTween.addEventListener(GTween.PROGRESS,onProgress); //注册侦听器
function onProgress(evt:Event):void {
if (String(myTween.lastProgressPoint)==" point1") {
trace(String(myTween.lastProgressPoint));//输出字符
new GTween(mySprite2,3,{x:400});//调用一个
} else {
trace(String(myTween.lastProgressPoint));
new GTween(mySprite3,2,{alpha:0});
}
}