flex百叶窗效果

effects/Blinds.as
JScript code
package effects
{
   
    import effects.effectClasses.BlindsInstance;
   
    import mx.controls.scrollClasses.ScrollBarDirection;
    import mx.effects.IEffectInstance;
    import mx.effects.TweenEffect;
   
    public class Blinds extends TweenEffect
    {
       
        private static var AFFECTED_PROPERTIES:Array = ["mask"];
       
        public function Blinds(target:Object=null)
        {
            super(target);
            instanceClass = BlindsInstance;
        }
       
        public var direction:String = ScrollBarDirection.VERTICAL;
       
        public var blindsFrom:Number;
       
        public var blindsTo:Number;
       
        public var gapFrom:Number;
       
        public var gapTo:Number;
       
        override public function getAffectedProperties():Array
        {
            return AFFECTED_PROPERTIES;
        }
       
        override protected function initInstance(instance:IEffectInstance):void
        {
            super.initInstance(instance);
            var blindsInstance:BlindsInstance = BlindsInstance(instance);
            blindsInstance.direction = direction;
            blindsInstance.blindsFrom = blindsFrom;
            blindsInstance.blindsTo = blindsTo;
            blindsInstance.gapFrom = gapFrom;
            blindsInstance.gapTo = gapTo;
        }
       
    }
   
}

 

effects/effectClasses/BlindsInstance.as
JScript code
package effects.effectClasses
{
   
    import flash.display.DisplayObject;
    import flash.display.Sprite;
   
    import mx.controls.scrollClasses.ScrollBarDirection;
    import mx.effects.effectClasses.TweenEffectInstance;
   
    public class BlindsInstance extends TweenEffectInstance
    {
       
        public function BlindsInstance(target:Object)
        {
            super(target);
        }
       
        public var direction:String = ScrollBarDirection.VERTICAL;
       
        public var blindsFrom:Number;
       
        public var blindsTo:Number;
       
        public var gapFrom:Number;
       
        public var gapTo:Number;
       
        override public function play():void
        {
            super.play();
            if (isNaN(blindsFrom))
                blindsFrom = 30;
            if (isNaN(blindsTo))
                blindsTo = 30;
            if (isNaN(gapFrom))
                gapFrom = 100;
            if (isNaN(gapTo))
                gapTo = 0;
            blindsFrom = Math.max(Math.min(blindsFrom, 100), 0);
            blindsTo = Math.max(Math.min(blindsTo, 100), 0);
            gapFrom = Math.max(Math.min(gapFrom, 100), 0);
            gapTo = Math.max(Math.min(gapTo, 100), 0);
            tween = createTween(this, [blindsFrom, gapFrom], [blindsTo, gapTo], duration);
        }
       
        override public function onTweenUpdate(value:Object):void
        {
            setBlindsMask(value[0], value[1]);
        }
       
        override public function onTweenEnd(value:Object):void
        {
            setBlindsMask(value[0], value[1]);
            super.onTweenEnd(value);   
        }
       
        private function setBlindsMask(blinds:Number, gap:Number):void
        {
            var currentTarget:DisplayObject = target as DisplayObject;
            if (!currentTarget)
                return;
            var mask:Sprite = new Sprite();
            var targetWidth:Number = currentTarget.width;
            var targetHeight:Number = currentTarget.height;
            var length:Number = 0;
            var gapLength:Number = 0;
            var currentOffset:Number = 0;
            var i:int = 0;
            mask.graphics.clear();
            mask.graphics.beginFill(0x000000, 1);
            if (direction == ScrollBarDirection.VERTICAL)
            {
                blinds = (targetHeight / 2) * (blinds / 100);
                length = (blinds == 0 ? targetHeight : Math.floor(targetHeight / blinds));
                gapLength = Math.round((length / 2) * (gap / 100));
                for (i = 0; i < blinds; i++)
                {
                    mask.graphics.drawRect(0, currentOffset,
                            targetWidth, Math.max(length - gapLength, 0));
                    currentOffset = currentOffset + length;
                }
                if (currentOffset < targetHeight)
                    mask.graphics.drawRect(0, currentOffset,
                            targetWidth, targetHeight - currentOffset);
            }
            else
            {
                blinds = (targetWidth / 2) * (blinds / 100);
                length = (blinds == 0 ? targetWidth : Math.floor(targetWidth / blinds));
                gapLength = Math.round((length / 2) * (gap / 100));
                for (i = 0; i < blinds; i++)
                {
                    mask.graphics.drawRect(currentOffset, 0,
                            Math.max(length - gapLength, 0), targetHeight);
                    currentOffset = currentOffset + length;
                }
                if (currentOffset < targetWidth)
                    mask.graphics.drawRect(currentOffset, 0,
                            targetWidth - currentOffset, targetHeight);
            }
            mask.graphics.endFill();
            currentTarget.mask = mask;
        }
       
    }
   
}

 

Test.mxml
XML code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:effect="effects.*"
    layout="absolute">
   
    <effect:Blinds id="hBlinds"
        direction="horizontal" duration="1000"
        blindsFrom="10" blindsTo="10" gapFrom="100" gapTo="0" />
   
    <effect:Blinds id="vBlinds"
        direction="vertical" duration="1000"
        blindsFrom="10" blindsTo="10" gapFrom="100" gapTo="0" />
   
    <mx:Panel id="panel" width="500" height="400" title="Panel" layout="vertical">
        <mx:Label text="Label" />
        <mx:Button label="Button" />
        <mx:TextInput text="TextInput" />
        <mx:HRule width="100%" />
        <mx:Button label="Play(horizontal)" color="#FF0000" click="hBlinds.play([panel])" />
        <mx:Button label="Play(vertical)" color="#FF0000" click="vBlinds.play([panel])" />
    </mx:Panel>
   
</mx:Application>