`
mmk12333
  • 浏览: 35073 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flex 加载数据时的动画效果

    博客分类:
  • flex
阅读更多

//

package hxht.comps.round
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.geom.Point;
    import flash.text.TextField;

    import mx.core.UIComponent;

    /**
     *
     * @author Administrator
     */
    public class RoundLavel extends UIComponent
    {
        /**
         * 加载效果动画类
         * @param width
         * @param height
         * @param roudr
         * @param showPross
         * @param loadtext
         * @param textposition
         */
        public function RoundLavel(width:Number = 100, height:Number = 100, roudr:Number = 40, showPross:Boolean = false, loadtext:String = "", textposition:String = "bottom")
        {
            super();
            roudR = 40;
            this.width = width;
            this.height = height;
            this.loadText = loadtext;
            this.textPosition = textposition;
            showProssText = showPross;
            this.addEventListener(Event.ENTER_FRAME, farmeHandler);
        }

        private var dfff:Boolean = true;

        /**
         *
         * @default
         */
        public var color:uint = 0x0000ff;

        /**
         *
         * @default
         */
        public var colorAlpha:Number = .6;

        /**
         *
         * @default
         */
        public var roudR:Number = 40;

        private var loadText:String = "";

        /**
         *
         * @default
         */
        public var arrd:Array = [ 345, 26, 60, 100, 140, 180, 220, 260 ];

        private var dddd:Number = 2;

        private var u:UIComponent;

        private var _sprit:Sprite;

        /**
         *
         * @default
         */
        public var speed:Number = 24;

        private var _text:TextField;

        private var showProssFlag:Boolean = false;

        private var textPosition:String = "bottom";

        private var playTime:int = 0;

        private var rounds:Vector.<Sprite> = new Vector.<Sprite>();


        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            updateText();
        }

        /**
         *
         * @param v
         */
        public function set showProssText(v:Boolean):void
        {
            showProssFlag = v;
            if (showProssFlag)
            {
                _text = new TextField();
                _text.mouseEnabled = false;
                this.addChild(_text);
                updateText();
            }
        }

        /**
         *
         * @param v
         */
        public function set label(v:String):void
        {
            this.loadText = v;
            updateText();
        }

        /**
         *
         * @return
         */
        public function get label():String
        {
            return loadText;
        }

        /**
         *
         */
        protected function updateText():void
        {
            if (_text != null)
            {
                _text.text = loadText;
                _text.width = _text.textWidth;
                _text.x = (this.width - _text.textWidth) / 2;
                _text.y = roudR + (roudR - 20) + 10;
            }
        }

        override protected function createChildren():void
        {
            super.createChildren();
            drawRound();
        }

        /**
         *
         */
        protected function drawRound():void
        {
            this.graphics.clear();

            var p:Point;
            var _round:Sprite;
            var _r:Number;

            for (var i:int = 0; i < arrd.length; i++)
            {
                p = getPointOnScrile(roudR, roudR, (roudR - 20), arrd[i]);

                _round = new Sprite();
                _r = (dddd * (1 + i * 0.2));
                _round.graphics.beginFill(color, colorAlpha);
                _round.graphics.drawCircle(_r, _r, _r);
                _round.graphics.endFill();
                _round.x = p.x - _r;
                _round.y = p.y - _r;
                rounds.push(_round);

                this.addChild(_round);
            }
        }

        /**
         *
         */
        protected function updateRound():void
        {
            var p:Point;
            var _round:Sprite;
            var _r:Number;
            for (var i:int = 0; i < arrd.length; i++)
            {
                p = getPointOnScrile(roudR, roudR, (roudR - 20), arrd[i]);

                _round = rounds[i];
                _r = (dddd * (1 + i * 0.2));
                _round.x = p.x - _r;
                _round.y = p.y - _r;
            }
        }

        /**
         *
         */
        public function play():void
        {
            dfff = true;
            this.visible = true;
            playTime = 0;
        }

        /**
         *
         */
        public function stop():void
        {
            dfff = false;
            playTime = 0;
            this.visible = false;
        }

        /**
         *
         * @param v
         */
        public function set playFlag(v:Boolean):void
        {
            if (v)
                play();
            else
                stop();
        }

        /**
         *
         * @return
         */
        public function get isPlay():Boolean
        {
            return dfff;
        }

        /**
         *
         * @return
         */
        public function get playCountTime():int
        {
            return playTime * 24;
        }

        /**
         *
         * @param e
         */
        protected function farmeHandler(e:Event):void
        {
            if (dfff && this.initialized)
            {
                playTime++;
                var len:int = arrd.length;
                for (var i:int = 0; i < len; i++)
                {
                    arrd[i] += speed;
                    if (arrd[i] > 360)
                    {
                        arrd[i] = (arrd[i] - 360);
                    }
                }
                updateRound();
            }
        }


        /**
         *
         * @param x
         * @param y
         * @param r
         * @param angle
         * @return
         */
        protected function getPointOnScrile(x:Number, y:Number, r:Number, angle:Number):Point
        {
            var _angle:Number = angle * Math.PI / 180;
            var _re:Point = new Point();
            _re.x = x + r * Math.cos(_angle);
            _re.y = y - r * Math.sin(_angle);

            return _re;
        }

    }
}

 

//

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       width="100%"
       height="100%"
       styleName="loadingmask"
       visible="{loadingFlag}"
       includeInLayout="{loadingFlag}"
       xmlns:round="hxht.comps.round.*">
 <fx:Script>
  <![CDATA[
   [Bindable]
   public var loadingFlag:Boolean=false;

   [Bindable]
   public var label:String="";
  ]]>
 </fx:Script>
 <round:RoundLavel playFlag="{loadingFlag}"
       width="100"
       height="100"
       verticalCenter="0"
       horizontalCenter="0"
       label="{label}"/>
</s:BorderContainer>

 

// true 加载, false 不加载

<win:Loading loadingFlag="{Boolean}"/>

分享到:
评论

相关推荐

    Flex加载GIF动画处理类

    综上所述,Flex加载GIF动画处理涉及到对GIF格式的理解、ActionScript 3.0的扩展、第三方库的使用以及自定义组件的开发等多个层面。通过掌握这些知识点,开发者可以在Flex应用中流畅地呈现GIF动画,提升用户体验。

    Flex 游戏中行走动画

    在游戏开发中,为了减少内存占用和提高加载速度,通常会将这些帧进行切图处理,即将多张图片切割成一张大图,然后通过改变显示部分来实现动画效果。 2. **BitmapData对象**:在ActionScript 3.0中,BitmapData类是...

    Flex2的几个行为动画源码

    9. **ZoomExample**: 这个例子可能涉及到缩放功能,可能是对图像或组件进行放大和缩小的动画效果。Flex2提供了ScaleTransform类来实现这个功能。 10. **SequenceExample**: 与ParallelExample相反,序列行为...

    超酷Flex动画图表

    Flare提供了各种图表、树形图、网络图以及复杂的动画效果,非常适合创建动态、交互式的数据展示。 1. **图表库文件(flare)**: Flare库包含一系列的数据结构和算法,用于数据的组织和可视化。它的核心功能包括: - ...

    Flex控件折叠效果

    - **动画效果**:为了实现“缩入折叠”和“翻转折叠”效果,可以使用TweenMax或Flex的Animate类来添加平滑的过渡动画。这些动画可以改变组件的高度、宽度、透明度等属性,从而实现动态的折叠效果。 - **数据绑定**...

    不错的flex杂志效果

    Flex杂志效果是一种基于Adobe Flex技术实现的数字出版物模拟翻页效果,常见...尽管现在有更多现代化的前端框架如React和Vue.js,但Flex在某些特定场景下,特别是对于需要丰富动画效果的RIA应用,依然具有其独特的价值。

    flex 图片轮播效果

    总的来说,"flex 图片轮播效果"是一个结合了Flex编程、XML数据绑定、用户交互和动画效果的综合性项目。通过理解这些核心概念,开发者可以创建出功能丰富的图片展示模块,提升网站或应用的用户体验。虽然没有提供源码...

    Flex4 电视墙效果

    5. **动画效果**:为了增加用户体验,电视墙通常会包含平滑的滚动、淡入淡出或缩放动画。Flex4的Tween类和Effect框架可以轻松实现这些效果。 6. **事件处理**:监听用户的滚动或点击事件是电视墙功能的核心部分。...

    flex web工作流程图

    综上所述,"flex web工作流程图"涉及到的技术点包括Flex框架、MXML和ActionScript编程、图形组件设计、数据绑定、事件处理、自定义组件开发、状态管理、布局和动画效果,以及后端服务集成。通过这些技术,开发者可以...

    Flex 3高级动画编程

    在Flex 3高级动画编程中,你将学习到如何利用ActionScript控制时间轴、创建自定义动画效果、以及与用户交互的响应式设计。 首先,了解基本的ActionScript语法是必要的,包括变量、数据类型、条件语句、循环和事件...

    arcgis for flex实现的地图卷帘效果

    开发者可以通过扩展这个模块,添加更多的功能,如多图层同步卷帘、自定义动画效果等。 总结来说,ArcGIS for Flex提供了一个强大的平台,使得开发者可以轻松地创建包含地图卷帘特效的应用。通过理解其API和动画机制...

    flex实现阴影效果

    如果你的应用需要根据服务器端数据实时更新阴影效果,可以利用BlazeDS进行数据推送,并结合Flex的数据绑定功能。这样,当服务器数据发生变化时,阴影效果也会自动更新。 5. **优化性能**: 尽管Flex的过滤器和...

    flex 旋转/扫描/加载/效果图

    Flex提供了丰富的数据加载机制,如Loader类用于加载图像、SWF或其他媒体文件,Service类则用于处理远程数据请求,如HTTPService或WebService。加载过程通常涉及事件监听,如` IOErrorEvent.IO_ERROR `和` Event....

    flex实现翻书效果

    8. **页面内容的加载和布局**:为了创建多页的翻书效果,需要设计一个机制来加载和组织每一页的内容。这可能涉及到数据绑定、动态创建组件或者XML/SWF嵌入等技术。 9. **性能优化**:在处理大量3D内容时,需要注意...

    flex iread效果

    5. **数据绑定**:使用Flex的数据绑定机制,将页面内容与数据模型关联,实现动态加载和切换书页。 6. **图形渲染**:可能涉及到利用BitmapData对象和位图缓存技术来优化性能,尤其是处理大量文本或图像时。 7. **...

    Flex 放大镜效果

    8. **Tweening**:为了提供平滑的动画效果,可以使用Tween库,如GreenSock Animation Platform (GAP) 或 Flex的内置TweenLite,来平滑地改变放大镜的位置和大小。 9. **皮肤自定义**:Flex允许开发者自定义组件外观...

    flex中使用away3d引擎播放的帧动画示例

    在“flex中使用away3d引擎播放的帧动画示例”中,开发者可能已经创建了一个`Sprite3D`实例,并通过加载一系列的纹理帧来实现动画效果。这些纹理帧通常存储在单独的图像文件中,然后在运行时按顺序应用到3D模型的表面...

    flex 图片浏览,flex图片滚动效果

    6. **动画效果**:为了提升用户体验,可以使用`Tween`类或`Animate`类添加过渡效果,如淡入淡出,使图片切换更自然。 7. **响应式设计**:考虑到不同设备的屏幕尺寸,Flex项目通常会采用响应式设计,通过`ViewStack...

    Flex GIS卷帘效果

    4. **动画效果**:利用Tween类或Timeline类,可以为卷帘动作添加平滑的过渡效果,提高用户体验。 5. **地理数据集成**:Flex GIS项目通常需要与GIS服务(如ArcGIS Server或MapServer)进行通信,获取并显示地图数据...

    flex------组件-----数据可视化

    这些图表可以通过XML或ActionScript数据源进行填充,并且具有高度定制性,可以调整颜色、样式、动画效果等。 2. **Data Providers**:在Flex中,数据可视化的关键在于数据提供者。数据提供者将应用程序中的数据映射...

Global site tag (gtag.js) - Google Analytics