flex 百叶窗效果

Blinds.as

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; } } } 

BlindsInstance.as
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; } } }  

Main.mxml

<?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>