簡単なセットの弾き込み効果

何が良い効果ですか?私の体得はそれらが真実な世界の物体の運動を模擬するので、既存の物理学に支持された簡潔な効果は長い間常に新しくて、実用的な良い効果です.これは脳そのものの思考パターンによって決められます.iPhoneは典型的な例です.いくつかの視覚的な衝撃は非常に強い効果があります.初めて接する時には確かに耳目を一新させることができますが、超現実的な手法は長い間見ていると美的疲労があり、逆に形式が内容より大きいと感じられます.これは魚を食べすぎると、肉がパテするのと同じです.
大丈夫です.ここで無駄話は終わります.Flex自身のPopupButtonは、モジュールにはじき込む効果を実現しました.大好きです.残念なことに、A社はこの効果を抽出して効果類として発表していません.幸い原理も実現も複雑ではないので、自分で一つ書いてみました.機能は完全ではないですが、十分です.似合うのが一番いいですね.
原理は簡単です.Animate効果類を継承し、UICComponentのscrollRectのx座標値を操作することで、目的のコンポーネントのポップアップと弾みを実現します.いくつかのコンポーネントの有用なパターンによって生成されたシャドウを考慮して,このシャドウはscrollRectの範囲外を示すので,効果は限界値を用いてこのような表示限界を補償した.コードで話す
PopEffect.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					xmlns:mx="library://ns.adobe.com/flex/mx"
					xmlns:myEffect="customEffect.*"
					width="600" height="600" viewSourceURL="srcview/index.html">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<s:Power id="powerEasing" exponent="5"/>
		<!--
		      ：
			direction  up, down, left, right ——          
			marginTop
			marginBottom
			marginLeft
			marginRight ——   ，   ，            
		-->
		<myEffect:PopupEffect id="popup" direction="left" easer="{powerEasing}" duration="500"
									 marginLeft="20" marginRight="20" marginBottom="20" />
	</fx:Declarations>
	
	<s:states>
		<s:State name="Un" />
		<s:State name="Deux" />
		<s:State name="Trois" />
	</s:states>
	
	<s:transitions>
		<s:Transition>
			<myEffect:PopupEffect targets="{[p1,i2,r3]}"
										 direction="up" duration="500" marginLeft="20" marginRight="20" marginBottom="20" />
		</s:Transition>
	</s:transitions>
	
	<!-- View State    -->
	<s:Panel id="p1" width="390" height="200" title="Un" includeIn="Un" x="110" y="50">
		<s:Label text="This is a Panel with dropShadow"  x="56" y="60" fontSize="19"/>
	</s:Panel>
	<mx:Image id="i2" source="@Embed(source='assets/logo.jpg')" horizontalCenter="0" verticalCenter="-178" includeIn="Deux"/>
	<mx:RichTextEditor id="r3" height="200" width="390" text="View State Trois" horizontalCenter="0" verticalCenter="-160" includeIn="Trois"/>
	<s:Button label="Un" width="40" x="75" y="94" rotation="-90" click="currentState='Un'" />
	<s:Button label="Deux" width="50" x="75" y="150" rotation="-90" click="currentState='Deux'" />
	<s:Button label="Trois" width="60" x="75" y="217" rotation="-90" click="currentState='Trois'" />
	
	<!-- ViewStack    -->
	<mx:ViewStack id="viewstack1" horizontalCenter="-2" verticalCenter="119" height="220" width="446">
		<s:NavigatorContent label="Alpha" width="100%" height="100%" showEffect="{popup}" hideEffect="{popup}">
			<s:Panel width="390" height="200" title="View Alpha" horizontalCenter="0" verticalCenter="0">
				<s:Label text="This is a Panel with dropShadow"  x="56" y="60" fontSize="19"/>
			</s:Panel>
		</s:NavigatorContent>
		<s:NavigatorContent label="Bravo" width="100%" height="100%" showEffect="{popup}" hideEffect="{popup}">
			<mx:Image source="@Embed(source='assets/logo.jpg')" horizontalCenter="0" verticalCenter="0"/>
			<s:Label y="182" text="View Bravo" fontSize="16" horizontalCenter="0"/>
		</s:NavigatorContent>
		<s:NavigatorContent label="Charlie" width="100%" height="100%" showEffect="{popup}" hideEffect="{popup}">
			<mx:RichTextEditor  height="200" width="390" text="View Charlie" horizontalCenter="0" verticalCenter="0"/>
		</s:NavigatorContent>
	</mx:ViewStack>
	<s:ButtonBar dataProvider="{viewstack1}" x="197" y="543"/>
	<s:Label x="243" y="291" text="ViewStack   " fontSize="17" x.Un="243" y.Un="297" text.Un="ViewStack   "/>
	<s:Label includeIn="Un" x="238" y="27" text="View State   " fontSize="16"/>
	
</s:Application>

PopEffect.as

/* Copyright 2010 Tu Ding */

package customEffect{
import flash.geom.Rectangle;

import mx.core.IVisualElement;
import mx.core.IVisualElementContainer;
import mx.core.UIComponent;
import mx.effects.IEffectInstance;
import mx.events.FlexEvent;

import spark.effects.Animate;
import spark.effects.animation.Animation;
import spark.effects.animation.IAnimationTarget;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
import spark.effects.supportClasses.AnimateInstance;

/*               */
public class PopupEffect extends Animate {
	
	/*         “    ” */
	[Inspectable( catalog="Common", type="String",enumeration="up,right,down,left", defaultValue = "up" )]
	public var direction:String = "up";
	
	//                ，                 
	[Inspectable( catalog="General", type="Number", defaultValue = "0" )]
	public var marginTop:int = 0;
	[Inspectable( catalog="General", type="Number", defaultValue = "0" )]
	public var marginRight:int = 0;
	[Inspectable( catalog="General", type="Number", defaultValue = "0" )]
	public var marginBottom:int = 0;
	[Inspectable( catalog="General", type="Number", defaultValue = "0" )]
	public var marginLeft:int = 0;
	
	public function PopupEffect( target:UIComponent = null )
	{
		super( target );
		instanceClass = PopupEffectInstance;
	}
	

	override protected function initInstance(instance:IEffectInstance):void
	{
		super.initInstance( instance );
		var inst:PopupEffectInstance = instance as PopupEffectInstance;
		inst.direction = direction;
		inst.marginTop = marginTop;
		inst.marginRight = marginRight;
		inst.marginBottom = marginBottom;
		inst.marginLeft = marginLeft;
	}
	
	/**
	 *  @private
	 */
	override public function getAffectedProperties():Array /* of String */
	{
		return ["parent"];
	}

}
}


import flash.geom.Rectangle;

import mx.core.UIComponent;
import mx.events.FlexEvent;

import spark.effects.animation.Animation;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
import spark.effects.supportClasses.AnimateInstance;

class PopupEffectInstance extends AnimateInstance {
	
	public var direction:String;
	public var marginTop:int;
	public var marginRight:int;
	public var marginBottom:int;
	public var marginLeft:int;
	
	public function PopupEffectInstance( target:Object )
	{
		super( target );
		autoRemoveTarget = true;
	}
	
	
	override public function play():void
	{
		var t:UIComponent = target as UIComponent;
		var scrollX:int = 0;
		var scrollY:int = 0;
		//         UIComponent   scrollRect    ，             scrollRect    
		var rectWidth:int = t.width + marginLeft + marginRight;
		var rectHeight:int = t.height + marginTop + marginBottom;
		
		//             
		var offset:int;
		//     marginLeft    ，          scrollRect      
		var revisedLocation:int;
		
		//             scrollRect       
		//               ，            
		if ( null == t.scrollRect )
		{
			t.x -= marginLeft;
			t.y -= marginTop;
		}
		
		switch( direction )
		{
			case "up":
				revisedLocation = -marginTop; 
				offset = rectHeight;
				scrollY = offset;
				break;
			case "right":
				revisedLocation = -marginLeft;
				offset = -rectWidth;
				scrollX = offset;
				break;
			case "down":
				revisedLocation = -marginTop;
				offset = -rectHeight;
				scrollY = offset;
				break;
			case "left":
				revisedLocation = -marginLeft;
				offset = rectWidth;
				scrollX = offset;
		}
		
		if ( null != triggerEvent )
			if ( triggerEvent.type == FlexEvent.SHOW )
			{
				t.scrollRect = new Rectangle( scrollX - marginLeft, scrollY - marginTop, rectWidth, rectHeight );
				motionPaths = new <MotionPath>[ new SimpleMotionPath("value", offset, revisedLocation)];
			}else{
				t.scrollRect = new Rectangle( 0 - marginLeft, 0 - marginTop, rectWidth, rectHeight );
				motionPaths = new <MotionPath>[ new SimpleMotionPath("value", revisedLocation, offset)];
			}
		
		if ( propertyChanges )
		{
			var parentChange:Boolean = 
				propertyChanges.end["parent"] !== undefined &&
				propertyChanges.end["parent"] != propertyChanges.start["parent"];
			if ( parentChange )
			{
				var moveIn:Boolean = parentChange && propertyChanges.end["parent"];
				if (moveIn)
				{
					t.scrollRect = new Rectangle( scrollX - marginLeft, scrollY - marginTop, rectWidth, rectHeight );
					motionPaths = new <MotionPath>[ new SimpleMotionPath("value", offset, revisedLocation)];
				}
				else
				{
					t.scrollRect = new Rectangle( 0 - marginLeft, 0 - marginTop, rectWidth, rectHeight );
					motionPaths = new <MotionPath>[ new SimpleMotionPath("value", revisedLocation, offset)];
				}
			}
		}
		
		super.play();
	}
	
	
	override public function animationUpdate(animation:Animation):void
	{
		super.animationUpdate(animation);
		
		var t:UIComponent = target as UIComponent;
		var rect:Rectangle = t.scrollRect;
		if ( direction == "up" || direction == "down" )
			rect.y = int(animation.currentValue["value"]);
		else
			rect.x = int(animation.currentValue["value"]);
		t.scrollRect = rect;
	}
	
}