`
china34420
  • 浏览: 133601 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

纯代码的一个圆形Loading组件

 
阅读更多
import net.xueyitong.controls.Loading;

var l:Loading = new Loading();

l.x = l.y = 100;

this.addChild(l);

l.run();

l.percent("20%");

this.addEventListener(Event.ENTER_FRAME,ff);
var p:Number = 0.005;
function ff(e:Event):void {
p += 0.005;
l.percent(int(p*100) + "%");
if (p>=1) {
this.removeEventListener(Event.ENTER_FRAME,ff);
l.stop();
//l.run()
}
}

b.addEventListener(MouseEvent.CLICK,bb);
function bb(e:MouseEvent):void {
p = 0.005;
this.addEventListener(Event.ENTER_FRAME,ff);
l.run(30);
}


////////////////////////////////////////////////////////////////

package net.xueyitong.controls
{
	import com.greensock.TweenLite;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.events.TimerEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.utils.Timer;
	
	/**
	 * 纯代码的一个圆形Loading组件
	 * 该组件需要com.greensock.TweenLite缓动类库
	 * @author zkl QQ:344209679
	 * 学习交流
	 */
	public class Loading extends Sprite 
	{
		//loading的圆点表列
		private var circles:Array = new Array();
		//loading的圆点数
		private var circleNum:int = 12;
		//loading的半径
		private var radius:Number = 20;
		//loading的圆点的颜色
		private var color:uint = 0xD4D4D4;
		//小圆点的半径
		private var subRadius:Number = 4;
		//每个圆点之间的延迟计算
		private var delay:int = 2;
		private var frameCount:int = 0;
		//当前圆点的下标
		private var currentCircleIndex:int = 0;
		//loading的圆点实例
		private var currentCircle:LoadingCircle;
		//loading显示文本域
		private var percentField:TextField;
		
		//timer
		public var frameRate:int;
		private var loadingTimer:Timer;
		private var timerPeriod:Number;
		//
		
		/**
		 * 创建一个Loading实例
		 * @param	radius :String 半径
		 * @param	color :uint 颜色
		 */
		public function Loading(radius:Number = 25, color:uint = 0xD4D4D4, subRadius:Number = 4) {
			this.radius = radius;
			this.color = color;
			this.subRadius = subRadius;
			init();
		}
		/**
		 * 运行Loading组件
		 * @param	frameRate : int 帧频
		 */
		public function run(frameRate:int = 30):void {
			percentField.text = "";
			this.frameRate = frameRate;
			timerPeriod = 1000 / frameRate;
			loadingTimer = new Timer(timerPeriod);
			loadingTimer.addEventListener(TimerEvent.TIMER, runLoading);
			loadingTimer.start();
		}
		/**
		 * 停止loading组件
		 */
		public function stop():void {
			loadingTimer.removeEventListener(TimerEvent.TIMER, runLoading);
			loadingTimer.stop();
		}
		/**
		 * 移除Loading组件
		 */
		public function remove():void {
			loadingTimer.stop();
			loadingTimer.removeEventListener(TimerEvent.TIMER, runLoading);
			for (var i:int = 0; i < this.numChildren; i++ ) {
				this.removeChild(getChildAt(0));
			}
			this.removeChild(percentField);
		}
		/**
		 * 显示loading文本域 一般是百分比进度
		 * @param	per :String 显示的字符串
		 */
		public function percent(per:String):void {
			percentField.text = per;
			percentField.setTextFormat(textFormat());
		}
		///////////////////////////////////////////////////////////////////////////////
		// protected
		protected function runLoading(e:TimerEvent):void {
			frameCount++;
			if (frameCount >= delay) {
				render();
			}
		}
		//初始化loading,排列每个圆点
		protected function init():void {
			var step:Number = Math.PI * 2 / circleNum;
			var angle:Number;
			for (var i:int = 0; i < circleNum; i++ ) {
				currentCircle = new LoadingCircle(subRadius, color);
				circles.push(currentCircle);
				this.addChild(currentCircle);
				angle = step * i;
				currentCircle.x = Math.cos(angle) * radius;
				currentCircle.y = Math.sin(angle) * radius;
				currentCircle.alpha = 0;
			}
			createPercentField();
		}
		//缩小
		protected function render():void {
			frameCount = 0;
			currentCircleIndex++;
			if ( currentCircleIndex >= circles.length) {
				currentCircleIndex = 0;
			}
			currentCircle = circles[currentCircleIndex];
			currentCircle.scaleX = currentCircle.scaleY = currentCircle.alpha = 1;
			TweenLite.to(currentCircle, 50 / frameRate, { scaleX:0, scaleY:0, alpha:0 } );
		}
		//进度文本域
		protected function createPercentField():void {
			percentField = new TextField();
			percentField.width = 40;
			percentField.height = 16;
			percentField.x = -20;
			percentField.y = -8;
			percentField.autoSize = TextFieldAutoSize.CENTER;
			percentField.selectable = false;
			this.addChild(percentField);
		}
		//文本格式
		protected function textFormat():TextFormat {
			var format:TextFormat = new TextFormat();
			format.font = "宋体";
			format.size = 12;
			format.color = this.color;
			format.align = TextFormatAlign.CENTER;
			return format;
		}
		//protected
		
		
	}//end class
		
}//end package

import flash.display.Sprite;
	
/**
 * loading组件的小圆圈
 * @author zkl
 */
class LoadingCircle extends Sprite
{
	public function LoadingCircle(radius:Number = 4, color:uint = 0x7B7B7B) {
		this.graphics.beginFill(color);
		this.graphics.drawCircle( -radius / 2, -radius / 2, radius);
		this.graphics.endFill();
	}
		
}//end class

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics