JavaScript缓动插件介绍

前言：我们在很多时候都需要实现DOM元素在视图里面缓动，所以我们需求解决办法。flash中早已经实现了缓动效果，并且一些技术网站上已经提供了js版本的实现。写这个目的是告诉那些没接触过缓动的朋友js也是可以实现缓动效果的，最经典的应用就是在地图上实现轨迹播放时车辆的缓动。

1、JavaScript缓动插件：

TweenLite.js,TweenLite.Min.js,TweenLineLite.js,TweenLineMax.js

您可以从这里下载：http://www.greensock.com/get-started-js/

2、TweenLite的使用：

导入TweenLite.js到指定的页面(同样使用于AS脚本的编写)。

//import the GreenSock classes

//import com.greensock.*;

//import com.greensock.easing.*;//-------------这些代码你可以从官方下载处获得（此处是AS的代码，js的类似）

 

//tween the MovieClip named "mc" to an alpha of 0.5 over the course of 3 seconds

TweenLite.to(mc, 3, {alpha:0.5});

 

//scale myButton to 150% (scaleX/scaleY of 1.5) using the Elastic.easeOut ease for 2 seconds

TweenLite.to(myButton, 2, {scaleX:1.5, scaleY:1.5, ease:Elastic.easeOut});

 

//tween mc3 in FROM 100 pixels above wherever it is now, and an alpha of 0. (notice the vars object defines the starting values instead of the ending values)

TweenLite.from(mc3, 1, {y:"-100", alpha:0});

 

//after a delay of 3 seconds, tween mc for 5 seconds, sliding it across the screen by changing its "x" property to 300, using the Back.easeOut ease to make it shoot past it and come back, and then call the onFinishTween() function, passing two parameters: 5 and mc

TweenLite.to(mc, 5, {delay:3, x:300, ease:Back.easeOut, onComplete:onFinishTween, onCompleteParams:[5, mc]});

function onFinishTween(param1:Number, param2:MovieClip):void {

    trace("The tween has finished! param1 = " + param1 + ", and param2 = " + param2);

}

 

//call myFunction() after 2 seconds, passing 1 parameter: "myParam"

TweenLite.delayedCall(2, myFunction, ["myParam"]);

 

//use the object-oriented syntax to create a TweenLite instance and store it so we can reverse, restart, or pause it later.

var myTween:TweenLite = new TweenLite(mc2, 3, {y:200, alpha:0.5, 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 exactly its 2-second point

myTween.currentTime = 2;

3、说明：

（1）、这种缓动效果是基于像素的改变而实现的。

（2）、Alpha通道是一个8位的灰度通道，该通道用256级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域，其中黑表示全透明，白表示不透明，灰表示半透明。改变alpha值，可处理PNG图片不透明。简单而言，阿尔法通道(Alpha Channel)是指一张图片的透明和半透明度。

（3）、对于其他插件，找到下载地址就可以看到相关的介绍和例子了，这里不再赘述。