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而言还有点弱）

 

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

import flash.events.MouseEvent;
import gs.*;
import gs.easing.*;

btnStart.addEventListener(MouseEvent.MOUSE_DOWN,btnStartMouseDownHandler);
btnStop.addEventListener(MouseEvent.MOUSE_DOWN,btnStopMouseDownHandler);

function btnStartMouseDownHandler(e:MouseEvent):void {
	tweenStart(0);
}

function btnStopMouseDownHandler(e:MouseEvent):void {
	TweenLite.killTweensOf(mc);
}

function tweenStart(d:uint=1):void {
	TweenLite.to(mc, 0.75, {autoAlpha:0.1, scaleX:0.02,scaleY:0.02, ease:Bounce.easeInOut, delay:d, onComplete:tweenEnd});
}

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

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

import flash.text.TextFieldAutoSize;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.ui.Mouse;
import flash.ui.MouseCursor;
import gs.*;
import gs.easing.*;
import flash.events.MouseEvent;

var imgNums:uint;
var arrImg:Array;
var arrBitMap:Array;
var arrTxtMC:Array;
var _loader:Loader;//装载
var _rate:TextField;//进度显示
var _index:uint = 0;
var _container:Sprite;
var _isLeft:Boolean;


//初始化
function init() {
	imgNums = 4;
	arrBitMap = new Array(imgNums);
	arrTxtMC = new Array(arrTxtMC);
	arrImg = ["http://images.24city.com/jimmy/ListBoxSlideShow/img/001.jpg",
	  "http://images.24city.com/jimmy/ListBoxSlideShow/img/002.jpg",
	  "http://images.24city.com/jimmy/ListBoxSlideShow/img/003.jpg",
	  "http://images.24city.com/jimmy/ListBoxSlideShow/img/004.jpg"];
	_loader = new Loader();
	_rate = new TextField();
	_container = new Sprite();
	_isLeft = true;

	_rate.text = '';
	_rate.autoSize = TextFieldAutoSize.CENTER;
	_rate.textColor = 0x000000;
	_rate.x = (stage.stageWidth - _rate.width)/2;
	_rate.y = loadMC.y + 15;
	this.addChild(_rate);
	sendRequest(arrImg[_index]);

	Mouse.cursor = MouseCursor.BUTTON;

}

//发送请求
function sendRequest(p_url:String) {
	var m_request = new URLRequest(p_url);
	_loader.load(m_request);
	_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
	_loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
}


//事件，下载中;
function onProgress(e:Event) {
	var m_info:LoaderInfo = e.target as LoaderInfo;
	var m_percent:uint = (m_info.bytesLoaded/m_info.bytesTotal)*100;
	_rate.text = m_percent.toString() + " %，" + (_index+1) + " / " + imgNums;
}

//事件，下载完毕;
function onComplete(e:Event) {
	var _imageData:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,true,0xFFFFFFFF);
	_imageData.draw(_loader, new Matrix(stage.stageWidth/_loader.width, 0, 0, stage.stageHeight/_loader.height, 0, 0));
	var m_image:Bitmap = new Bitmap(_imageData);
	arrBitMap[_index] = m_image;
	var txtMc:TextMC = new TextMC();
	txtMc.txt.text = (_index+1).toString();
	arrTxtMC[_index] = txtMc;
	_index++;
	if (_index > imgNums - 1) {
		this.removeChild(_rate);
		this.removeChild(loadMC);
		//trace("全部加载完成!");
		loadContainer();
	}
	else {
		sendRequest(arrImg[_index]);
	}
}

//加载最外层容器
function loadContainer():void {
	for (var i:int=0; i<imgNums; i++) {
		var img:Bitmap = arrBitMap[i];
		_container.addChild(img);
		img.y = 0;
		img.x = img.width * i;


	}
	addChild(_container);

	for (i=imgNums-1; i>=0; i--) {
		var txt:TextMC = arrTxtMC[i];
		txt.y = stage.stageHeight - txt.height + 5;
		txt.x = stage.stageWidth + 10 - (txt.width+5)*(imgNums-i);
		addChild(txt);
		txt.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
	}
	_index = 0;
	tweenStart();//启动动画
	setCurrentTxt();

	_container.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);
	_container.addEventListener(MouseEvent.ROLL_OVER,RollOverHandler);

}

function tweenStart(d:uint=1):void {
	TweenLite.to(_container,0.2,{x:-stage.stageWidth*_index,delay:d,onComplete:tweenEnd});
	setCurrentTxt();
}

function tweenEnd():void {
	if (_isLeft) {
		_index++;
	}
	else {
		_index--;
	}
	TweenLite.to(_container,0.2,{x:-stage.stageWidth*_index,delay:1,onComplete:tweenStart});

	if (_index >= 3) {
		_isLeft = false;
	}
	else if (_index<=0) {
		_isLeft = true;
	}
}

//设置当前高亮文本按钮索引
function setCurrentTxt():void {
	//trace(_index);
	for (var i:uint=0; i<imgNums; i++) {
		if (i == _index) {
			arrTxtMC[i].gotoAndStop(2);
		}
		else {
			arrTxtMC[i].gotoAndStop(1);
		}
	}
}

function MouseDownHandler(e:MouseEvent):void {	
	var _temp:int = parseInt((e.currentTarget as TextMC).txt.text,10)-1;	
	if (_temp==0){
		_isLeft = true;
	}
	if (_temp==imgNums-1){
		_isLeft = false;
	}
	_index = _temp;
	tweenStart(0);
}

function MouseOutHandler(e:MouseEvent):void {
	tweenStart();
}

//停止动画;
function RollOverHandler(e:MouseEvent):void {
	TweenLite.killTweensOf(_container);	
}



init();

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