Greensock平台

最新推荐文章于 2020-07-05 19:45:17 发布

IT古董

最新推荐文章于 2020-07-05 19:45:17 发布

阅读量2.5k

点赞数

分类专栏： Flash 文章标签：平台 delay object import function flash

Flash 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

转自：http://hi.baidu.com/bbjxl/blog/item/6e8c6c34e5d68c2e5ab5f56e.html

Greensock介绍：使用代码实现动画对于初学flash的人来说有点望而生畏，但是使用Greensock平台，可以使这编程一个简单而有趣的事情。Greensock包含TweenNano、TweenLite、TweenMax三个类，其中TweenLite作为该平台的基石，TweenNano是TweenLite的超级轻量级，其去掉了很多功能，但对于那些对swf体积要求苛刻的广告设计人员，TweenNano确是一个很好的选择；TweenMax为TweenLite的增强版，拥有更强的功能（如默认激活大部分插件），因而体积比较大……
官方英文教程及类库下载：http://www.greensock.com/get-started-tweening/
TweenNano
特点：轻量级，压缩只有1.6K，可以实现TweenLite能够实现的功能，除以下几点：
1、不能激活插件和使用插件
2、不能实现复杂的序列sequencing（可以使用”delay”专有属性实现简单的序列）和TweenNano 实例不能够嵌入 TimelineLite 或 TimelineMax实例以实现团体groups管理。
3、重写模式更少，你可以覆盖或不覆盖同一对象上的其它动画效果，但是不能使用OverwriteManager来扩展动画的其他性能，也不能够AUTO, CONCURRENT, PREEXISTING, and ALL_ONSTART模式
4、相对TweenLite, TweenNano没有pause(), play(), resume(), restart(), reverse(), invalidate(), onStart, defaultEase, easeParams, currentTime, startTime, totalTime, paused, reversed, and totalDuration等方法和属性。
注意：
1. TweenNano(target:Object, duration:Number, vars:Object)；第1个参数为你应用动画的对象，第2个参数为动画延续的时间，第3个参数包含你要应用动画的所有属性对象且该对象内属性顺序可以错乱；
2.如以字符串形式传入值，将使用相对值；
3.终止所有的动画，使用TweenNano.killTweensOf(mc);
4. TweenNano.from()使对象从参数设定的状况运动到当前状况。
专有属性：
delay : Number
useFrames : false
ease : Function
onUpdate : Function
onUpdateParams : Array
onComplete : Function
onCompleteParams : Array
immediateRender : true
overwrite : true
公共属性：
duration : Number
target : Object
useFrames : Boolean
vars : Object
公共方法：
TweenNano(target:Object, duration:Number, vars:Object)
complete(skipRender:Boolean = false):void
delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array = null, useFrames:Boolean = false):TweenNano [static]
from(target:Object, duration:Number, vars:Object):TweenNano [static]
kill():void
killTweensOf(target:Object, complete:Boolean = false):void [static]
renderTime(time:Number):void
to(target:Object, duration:Number, vars:Object):TweenNano [static]
例子：
import com.greensock.*;
import com.greensock.easing.*;
TweenNano.to(mc,2, {x:400, overwrite:false,delay:2});//默认情况下，建立一个新的动画将覆盖该对象其它动画，将overwrite设置为false将阻止这种覆盖行为。
TweenNano.to(mc, 5, {alpha:0.5, x:120, overwrite:false, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:[5, mc]});//透明度变为0.5，位置为x轴120，效果为Back.easeOut,不覆盖前面的动画，且在动画结束后调用onFinishTween函数
function onFinishTween(param1:Number, param2:MovieClip):void {
trace("The tween has finished! param1 = " + param1 + ", and param2 = " + param2);
}

使用范例：
TweenNano、TweenLite、TweenMax使用相同的语法格式，而且as3版本和as2版本形式也一致，只是在as2中将x，y，alpha(0-1),rotation修改为_x，_y，_alpha(0-100)，_rotation。
1、导入类
import com.greensock.*;//也可以单个导入，flash会自动嵌入用到的类
import com.greensock.easing.*;
2、使用TweenLite完成制作的简单的缓动
TweenLite.to(mc, 1.5, {x:100});//经过1.5秒mc从当前移动到x轴100位置
3、可以对物体任意多个属性同时运用缓动效果，如对mc的多个属性运用动画
TweenLite.to(mc, 1.5, {x:100, y:200, alpha:0.5});//经过1.5秒mc从当前移动到x轴100，y轴200位置，透明度变为0.5
4、As2与as3的语法很相识，大部分只需要使用as2中属性的书写方式
TweenLite.to(mc, 1.5, {_x:100, _y:200, _alpha:50});//as2语法，当然as2中需导入as2的greensock类库
5、可以使用from()方法使mc从参数设定的状况转变到当前的状况：
TweenLite.from(mc, 1.5, {y:0, alpha:0});//1.5秒内将mc从y轴为0，透明度为0转变到当前的状态
      如果你习惯使用面向对象编程模式，可以使用存储引用的方式建立对象，然后方便地控制，灵活运用pause(), resume(), reverse(), restart()方法。
var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:200, alpha:0.5});//和使用TweenLite.to()等效
专有属性：即为TweenNano、TweenLite或TweenLite认可的保留关键字，有着特定的用途，如onComplete, ease, overwrite, paused, useFrames, immediateRender, onStart, onUpdate, onCompleteParams,
ease：缓动方程式，可以使用com.greensock.easing包、flash自身的或Robert Penner的缓动类
overwrite ：设定缓动是否覆盖
useFrames ：设定是基于帧还是基于seconds，默认为false
onComplete ：设定缓动结束后调用的函数
immediateRender：使用form()方法时是否在delay之前就设置到初始位置
TweenLite.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:myFunction});
function myFunction():void {
    trace("tween finished");
}
使用插件：可以将插件看作为TweenLite能够动态添加具有额外功能的特别属性，TweenLite默认情况下没有激活插件(TweenMax默认为激活)，当激活插件后，对TweenLite、TweenMax都产生作用。
使用插件首先需要导入插件，另外需要激活，将需要激活的插件传递给activate方法的参数数据就行了。
import com.greensock.plugins.*;
import com.greensock.*;
import com.greensock.easing.*;
TweenPlugin.activate([GlowFilterPlugin,AutoAlphaPlugin]);
TweenLite.to(mc, 0.5, {x:277, y:311,autoAlpha:0.9, glowFilter:{color:0x91e600, alpha:1, blurX:30, blurY:30}, ease:Cubic.easeInOut});
覆盖其它缓动：默认情况下，TweenLite将覆盖之前所有的缓动，要使TweenLite使用AUTO模式，只要加上下面的一行代码：
OverwriteManager.init(2)
    注：上面的代码具有全局影响，如果只需要对单独的缓动使用AUTO模式，可使用下面的代码
TweenLite.to(mc, 1, {x:100, overwrite:2});
//TweenLite.to(mc, 1, {x:100, overwrite:true});
控制缓动：当你建立缓动后，可以使用pause() resume(), reverse(), play(), restart(), invalidate(), or kill()开对它进行操作。
var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:100});
myTween.pause(); //暂停
myTween.resume(); //恢复
myTween.reverse(); //反转
myTween.play(); //开始
myTween.restart(); //重新开始
myTween.invalidate(); //清除初始值
myTween.kill(); //取消
TweenLite.killTweensOf(mc);//取消所有

代码解析：
import com.greensock.*;
import com.greensock.easing.*;
TweenMax.to(mc, 3, {alpha:0.5});//mc经过3秒透明度变为0.5
TweenMax.to(myButton, 2, {scaleX:1.5, scaleY:1.5, ease:Elastic.easeOut});
//mybutton经过两秒扩张为原来的1.5倍，使用Elastic.easeOut动画效果
TweenMax.from(mc3, 1, {y:"-100", alpha:0}); //mc3从相对该位置-100经过1秒运动到该位置，且透明度变为0
TweenMax.fromTo(mc4, 1, {x:100}, {x:300, tint:0xFF0000}); //mc4从x为100移动到x为300的地方，且颜色变换为0xFF0000
TweenMax.to(mc, 5, {delay:3, x:300, ease:Back.easeOut, onComplete:onFinishTween, onCompleteParams:[5, mc]});
//延迟3秒后mc在5秒内移动到x为300的位置，动画效果为Back.easeOut，并在完成后调用onFinishTween函数
function onFinishTween(param1:Number, param2:MovieClip):void {
trace("The tween has finished! param1 = " + param1 + ", and param2 = " + param2);
}
TweenMax.delayedCall(2, myFunction, ["myParam"]); //延迟2秒后调用myFunction函数
//tween every MovieClip in the "letters" Array up 100 pixels (changing their "y" property to a relative value of "-100") over 2 seconds while fading out, and stagger the start time of each tween by 0.1 seconds. There could literally be hundreds of MovieClips in the "letters" Array and this one line of code would tween them all!
TweenMax.allTo(letters, 2, {y:"-100", alpha:0}, 0.1);
//use the object-oriented syntax to create a TweenMax instance and store it so we can reverse, restart, or pause it later. Make it repeat twice with a 1-second delay between each repeat cycle.
var myTween:TweenMax = new TweenMax(mc2, 3, {y:200, repeat:2, repeatDelay:1, onComplete:myFunction});
//some time later (maybe in by a ROLL_OUT event handler for a button), reverse the tween, causing it to go backwards to its beginning from wherever it is now.
myTween.reverse();
//pause the tween
myTween.pause();
//restart the tween
myTween.restart();
//make the tween jump to its halfway point
myTween.currentProgress = 0.5;