Flash/Flex学习笔记(52)：使用TweenLite

TweenLite是第三方出品的专用于各种缓动动画的类库，其性能据说已经超过了Adobe官方的Tween.

从网上找到了一篇中文的说明文档：https://files.cnblogs.com/yjmyzz/tweenLite%e4%b8%ad%e6%96%87%e6%89%8b%e5%86%8c%e4%b8%8e%e5%8f%82%e6%95%b0%e8%af%b4%e6%98%8e.pdf

这是官方的测试示例：

AS3类库下载： https://files.cnblogs.com/yjmyzz/greensock-tweening-platform-v10-as3.zip

用Silverlight的朋友们也不要流口水：因为Silverlight也有相应的tween类库了，详见 http://www.cnblogs.com/nasa/archive/2008/09/11/1288782.html （只不过功能相对Flash而言还有点弱）

 

下面是一个基本的使用示例：

01	import flash.events.MouseEvent;

02	import gs.*;

03	import gs.easing.*;

04

05	btnStart.addEventListener(MouseEvent.MOUSE_DOWN,btnStartMouseDownHandler);

06	btnStop.addEventListener(MouseEvent.MOUSE_DOWN,btnStopMouseDownHandler);

07

08	function btnStartMouseDownHandler(e:MouseEvent):void {

09	tweenStart(0);

10

}

11

12	function btnStopMouseDownHandler(e:MouseEvent):void {

13	TweenLite.killTweensOf(mc);

14

}

15

16	function tweenStart(d:uint=1):void {

17	TweenLite.to(mc, 0.75, {autoAlpha:0.1, scaleX:0.02,scaleY:0.02, ease:Bounce.easeInOut, delay:d, onComplete:tweenEnd});

18

}

19

20	function tweenEnd():void {

21	TweenLite.to(mc, 0.75, {autoAlpha:1,scaleX:1,scaleY:1,ease:Back.easeInOut, delay:1, onComplete:tweenStart});

22

}

下面这种图片轮换广告，以前曾经用Silverlight实现过（见：Silverlight之ListBox/Style学习笔记--ListBox版的图片轮换广告）,今天用TweenLite也来弄一个：

001	import flash.text.TextFieldAutoSize;

002	import flash.display.Bitmap;

003	import flash.display.Sprite;

004	import flash.ui.Mouse;

005	import flash.ui.MouseCursor;

006	import gs.*;

007	import gs.easing.*;

008	import flash.events.MouseEvent;

009

010	var imgNums:uint;

011	var arrImg:Array;

012	var arrBitMap:Array;

013	var arrTxtMC:Array;

014	var _loader:Loader;//装载

015	var _rate:TextField;//进度显示

016	var _index:uint = 0;

017	var _container:Sprite;

018	var _isLeft:Boolean;

019

020

021

//初始化

022	function init() {

023	imgNums = 4;

024	arrBitMap = new Array(imgNums);

025	arrTxtMC = new Array(arrTxtMC);

026	arrImg = ["http://images.24city.com/jimmy/ListBoxSlideShow/img/001.jpg",

027	"http://images.24city.com/jimmy/ListBoxSlideShow/img/002.jpg",

028	"http://images.24city.com/jimmy/ListBoxSlideShow/img/003.jpg",

029	"http://images.24city.com/jimmy/ListBoxSlideShow/img/004.jpg"];

030	_loader = new Loader();

031	_rate = new TextField();

032	_container = new Sprite();

033	_isLeft = true;

034

035	_rate.text = '';

036	_rate.autoSize = TextFieldAutoSize.CENTER;

037	_rate.textColor = 0x000000;

038	_rate.x = (stage.stageWidth - _rate.width)/2;

039	_rate.y = loadMC.y + 15;

040	this.addChild(_rate);

041	sendRequest(arrImg[_index]);

042

043	Mouse.cursor = MouseCursor.BUTTON;

044

045

}

046

047

//发送请求

048	function sendRequest(p_url:String) {

049	var m_request = new URLRequest(p_url);

050	_loader.load(m_request);

051	_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

052	_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);

053

}

054

055

056

//事件，下载中;

057	function onProgress(e:Event) {

058	var m_info:LoaderInfo = e.target as LoaderInfo;

059	var m_percent:uint = (m_info.bytesLoaded/m_info.bytesTotal)*100;

060	_rate.text = m_percent.toString() + " %，" + (_index+1) + " / " + imgNums;

061

}

062

063	//事件，下载完毕;

064	function onComplete(e:Event) {

065	var _imageData:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0xFFFFFFFF);

066	_imageData.draw(_loader, new Matrix(stage.stageWidth/_loader.width, 0, 0, stage.stageHeight/_loader.height, 0, 0));

067	var m_image:Bitmap = new Bitmap(_imageData);

068	arrBitMap[_index] = m_image;

069	var txtMc:TextMC = new TextMC();

070	txtMc.txt.text = (_index+1).toString();

071	arrTxtMC[_index] = txtMc;

072

_index++;

073	if (_index > imgNums - 1) {

074	this.removeChild(_rate);

075	this.removeChild(loadMC);

076	//trace("全部加载完成!");

077	loadContainer();

078

}

079

else {

080	sendRequest(arrImg[_index]);

081

}

082

}

083

084

//加载最外层容器

085	function loadContainer():void {

086	for (var i:int=0; i<imgNums; i++) {

087	var img:Bitmap = arrBitMap[i];

088	_container.addChild(img);

089	img.y = 0;

090	img.x = img.width * i;

091

092

093

}

094	addChild(_container);

095

096	for (i=imgNums-1; i>=0; i--) {

097	var txt:TextMC = arrTxtMC[i];

098	txt.y = stage.stageHeight - txt.height + 5;

099	txt.x = stage.stageWidth + 10 - (txt.width+5)*(imgNums-i);

100	addChild(txt);

101	txt.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);

102

}

103	_index = 0;

104	tweenStart();//启动动画

105	setCurrentTxt();

106

107	_container.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);

108	_container.addEventListener(MouseEvent.ROLL_OVER,RollOverHandler);

109

110

}

111

112	function tweenStart(d:uint=1):void {

113	TweenLite.to(_container,0.2,{x:-stage.stageWidth*_index,delay:d,onComplete:tweenEnd});

114	setCurrentTxt();

115

}

116

117	function tweenEnd():void {

118	if (_isLeft) {

119

_index++;

120

}

121

else {

122

_index--;

123

}

124	TweenLite.to(_container,0.2,{x:-stage.stageWidth*_index,delay:1,onComplete:tweenStart});

125

126	if (_index >= 3) {

127	_isLeft = false;

128

}

129	else if (_index<=0) {

130	_isLeft = true;

131

}

132

}

133

134	//设置当前高亮文本按钮索引

135	function setCurrentTxt():void {

136	//trace(_index);

137	for (var i:uint=0; i<imgNums; i++) {

138	if (i == _index) {

139	arrTxtMC[i].gotoAndStop(2);

140

}

141

else {

142	arrTxtMC[i].gotoAndStop(1);

143

}

144

}

145

}

146

147	function MouseDownHandler(e:MouseEvent):void {

148	var _temp:int = parseInt((e.currentTarget as TextMC).txt.text,10)-1;

149	if (_temp==0){

150	_isLeft = true;

151

}

152	if (_temp==imgNums-1){

153	_isLeft = false;

154

}

155	_index = _temp;

156	tweenStart(0);

157

}

158

159	function MouseOutHandler(e:MouseEvent):void {

160	tweenStart();

161

}

162

163

//停止动画;

164	function RollOverHandler(e:MouseEvent):void {

165	TweenLite.killTweensOf(_container);

166

}

167

168

169

170

init();

 源文件下载：http://cid-2959920b8267aaca.skydrive.live.com/self.aspx/Flash/TweenLiteDemo.rar