`
china34420
  • 浏览: 136349 次
  • 性别: 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

分享到:
评论

相关推荐

    封装一个基于iOS与Android双平台的Toast组件和加载Loading组件

    - Loading组件通常是一个简单的圆形或线条进度条,可以通过改变其填充状态来表示加载进度。对于无确定进度的加载,可以使用无限循环的动画。 - 可以提供不同样式的选择,例如全屏遮罩式加载和小图标加载,以适应...

    WPF 实现的袋进度通知的Loading组件

    在本文中,我们将深入探讨如何使用WPF(Windows Presentation Foundation)来实现一个具有加载进度通知的Loading组件。WPF作为.NET Framework的一部分,提供了一个强大的、声明式的用户界面框架,允许开发者创建美观...

    Winform圆形环绕的Loading动画实现代码

    本篇文章将详细讲解如何在Winform中实现一个圆形环绕的Loading动画。 首先,我们需要了解Winform中的基本组件和图形处理。在本例中,我们将使用PictureBox控件来显示动画效果。PictureBox控件可以用来显示图像,...

    android圆形加载进度条

    "android圆形加载进度条"是一个专为Android应用设计的组件,它能够以圆形的形式显示数据加载的进度,既美观又实用。在这款demo中,开发者可以直接将代码集成到自己的项目中,无需花费大量时间进行自定义开发。 圆形...

    ink-spinner适用于Ink的圆形加载Spinner组件

    ink-spinner是专门为基于Node.js的终端UI库Ink设计的一个圆形加载组件,它为用户提供了一种优雅的方式,显示正在后台进行的加载过程。本文将深入探讨ink-spinner的使用、功能及其在Ink中的应用。 首先,我们需要...

    swift-ProcessLoadingView可定制功能性更强的圆形进程条组件

    Swift中的`ProcessLoadingView`是一个强大的、可定制的圆形进程条组件,专为开发者提供更加灵活的进度指示功能。在iOS应用开发中,进程条通常用于显示数据加载、任务执行等过程的进度,以增强用户体验。`...

    swift-Swift实现的一个Loading动画

    本项目"swift-Swift实现的一个Loading动画"就是利用Swift语言创建的一种加载动画效果。 在Swift中实现加载动画,通常涉及以下几个关键知识点: 1. **Core Animation**:Swift中的动画大多基于Core Animation框架,...

    安卓进度条loadingprogress相关-一个很酷的加载loading效果.rar

    "下载更多打包源码~.url"可能是一个链接,指向更多的Android加载动画或其他UI组件的示例代码,这对于开发者扩展知识库和提升技能非常有帮助。通过研究和实践这些开源项目,开发者可以了解到最新的设计趋势和技术实现...

    wpf加载等待动画(loading)

    在这个特定的示例中,描述中提到我们将在Canvas控件中放置9个Ellipse(圆形)元素,然后通过一个定时器来不断调整这些圆的位置,以此模拟“Loading”动画的循环流动感。 1. **Canvas控件**:Canvas是WPF中的一个...

    安卓自定义loading加载框

    "安卓自定义loading加载框"是一个专为Android Studio设计的组件库,允许开发者根据项目需求定制自己的加载动画效果,以增强应用的视觉表现力和交互体验。 首先,我们要理解加载框的基本原理。在Android中,加载框...

    微信小程序 loading 详解及实例代码

    1. `hidden`:这是一个布尔类型的属性,用来控制`loading`组件的可见性。默认值为`false`,表示`loading`图标会显示在屏幕上。当设置为`true`时,`loading`图标会被隐藏。在示例代码中,我们通过`&lt;loading hidden="{...

    实现圆形加载中效果自定义Dialog

    在这个例子中,"loading_black_303132_文件"是一个PNG图像,用于展示加载中的动画效果。我们会在自定义布局文件中引用这个图片,创建一个圆形的加载图标。布局文件通常用XML编写,可以包含各种视图元素,如...

    安卓进度条loadingprogress相关-android炫酷loading.rar

    `ProgressBar`是一个非模态组件,可以在主界面上显示一个水平或垂直的进度条,用户可以同时与应用的其他部分交互。而`ProgressDialog`则是一个模态对话框,它会在屏幕中心显示进度条,直到后台任务完成,用户无法...

    Android自定义loading Dialog

    在这个例子中,我们可以设计一个包含一个圆形进度条、一个简单的文本提示和自定义背景的布局。例如: ```xml android:id="@+id/progress_bar" style="?android:attr/progressBarStyleSmall" android:layout_...

    ios-简单实用的loading.zip

    "ios-简单实用的loading.zip"中的资源很可能是提供了一个简单的加载指示器解决方案,使得开发者只需要一行代码就能在应用中集成这种功能。下面我们将深入探讨加载指示器在iOS开发中的应用、实现方式以及如何通过简洁...

    jQuery圆形旋转导航 jQuery圆形旋转导航代码下载.zip

    总的来说,"jQuery圆形旋转导航"是一个集成了HTML5、CSS3和jQuery技术的前端项目,它展示了如何利用这些技术来创造独特的用户体验。开发者可以参考这个代码,学习如何实现动态导航,提升自己的前端技能。在实际应用...

    安卓进度条loadingprogress相关-漂亮的loading加载框.zip

    "安卓进度条loadingprogress相关-漂亮的loading加载框.zip"是一个资源包,包含了一些可能用于创建美观且实用的加载框的源码和示例。虽然由于文件数量众多,无法逐一验证每个文件的可用性,但它们提供了一个很好的...

    三款Android炫酷Loading动画组件推荐

    在Android应用开发中,用户体验是至关重要的,而Loading动画正是其中不可或缺的一部分。它不仅能够告知用户应用程序正在进行...记住,细节决定成败,一个精心设计的Loading动画可能会成为用户记住你应用的关键因素。

    silverlight的loading

    RoundedBusyIndicator可能是包含在压缩包中的一个特定组件或示例,专门用于创建具有圆角设计的加载指示器。在Silverlight中,这样的自定义控件可能通过结合使用XAML(eXtensible Application Markup Language)和C#...

    Android远程登录含有loading登录效果~~完整代码和超级详细注释.zip

    这个"Android远程登录含有loading登录效果~~完整代码和超级详细注释.zip"压缩包包含了一个实现这一功能的示例项目,具有加载指示器(loading效果)以提升用户体验。下面我们将详细探讨这一主题。 首先,远程登录的...

Global site tag (gtag.js) - Google Analytics