Flex101：用Flex创建Swipe翻板/Slide效果

本文来自：http://www.insideria.com/2009/12/flex-101-creating-an-swipeslid.html

在本例中，我们将谈论怎样创建swipe/slide效果。当你从一个屏幕翻到另外一个屏幕上，你经常可以看到触摸设施里出现“转变”，我们就是受到了它的启发。一页内容从滑移到一边，另外一页从另外一边无缝滑动进来。

在我们进一步了解如何获得这样的效果之前，我们首先来检验下实际的动态效果。点击下面的“Animate!”按钮，引发效果。你可以改变下拉式清单中的选定条目，以改变动画的方向。

咋一看上去，你可能会想“啊，这么简单“。然后认为一般的显示与隐藏效果就可以成功。如果你处理的内容是mx: ViewStack（正如这个范例的一样）里的，情况就不一定如你想像的那么简单了。使用不同的显示和隐藏mx:Move效果实际上会产生呆板和不连贯的动画，这样就不能达到设想的效果。

在这个范例中，我使用了一个mx:Im age来显示“抓取“现在浏览的内容，并使用了一个mx:Parallel效果来动画化新的内容的滑入和图片的滑出。通过抓取现在可视组件的快照，你可以动画化快照，而同时隐藏实际内容(以显示新的内容)。这个mx:Parallel效果让每个内容都同步，无缝连接，用户完全不会注意到。

在本例中，我有些小的，静态尺寸的内容，很容易就动画化。这种方法也可应用于大些的物体。不过显示/隐藏的物体都应该是同样的尺寸。这其实也是Adobe Max（在下面的视频里）的多点触摸keynote demo里的一指翻板使用的方法。

你可以看到，如下所示，基本的布局代码非常简单，直截了当。有个面板，包括了ViewStack里的内容。唯一可能看上去比较奇怪的就是图片，可视和includeInLayout 都是false。这就是会被用来将动画内容从屏幕上关闭的图片。

<mx:Panel title="Swipe Effect Demo" horizontalCenter="0" verticalCenter="0" width="300" height="300" layout="absolute" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:ViewStack id="content" width="100%" height="100%"> <mx:Canvas width="100%" height="100%" showEffect="{showEffect}" > <mx:DateChooser width="100%" height="100%" /> </mx:Canvas> <mx:Canvas width="100%" height="100%" showEffect="{showEffect}" > <mx:TextArea width="100%" height="100%" fontWeight="bold" fontSize="14"> <mx:text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </mx:text> </mx:TextArea> </mx:Canvas> </mx:ViewStack> <mx:Image id="animateImage" visible="false" includeInLayout="false" /> <mx:ControlBar> <mx:ComboBox id="direction" width="100%" dataProvider="['up','down','left','right']" selectedIndex="2"/> <mx:Button label="Animate!" width="100%" click="animate()" /> </mx:ControlBar> </mx:Panel>

你可能注意到在ViewStack里的内容显示效果参照了showEffect实例。这就是并联效果，用来动画化新的内容，放上屏幕，并把被抓取的图片滑出屏幕。需要注意的重要一点就是： animateImage实例是被隐藏在effectEnd实例上的。这样就可以阻止错误或视觉制品。

<mx:Parallel id="showEffect" > <mx:Move id="contentMove" /> <mx:Move id="imageMove" target="{animateImage}" /> <mx:effectEnd> <!--[CDATA[ animateImage.visible = false; animateImage.includeInLayout = false; ]]--> </mx:effectEnd> </mx:Parallel>

现在，我们来看看让导致这一切发生的代码。动画函数设定animateImage实例的尺寸和内容，然后在两个mx:Move效果上设置移动参数（参数被用来启动动画）toggleVisibility() 函数开关ViewStack的可视化子控件。当子控件的可视性改变时，触发showEffect 效果实例，继而触发内容的平滑无缝动画化。

<mx:Script> <!--[CDATA[ import mx.effects.easing.Exponential; import mx.graphics.ImageSnapshot; private function animate() : void { animateImage.width = content.width; animateImage.height = content.height; animateImage.source = new Bitmap( ImageSnapshot.captureBitmapData( content ) ); animateImage.visible = true; animateImage.includeInLayout = true; switch ( direction.text ) { case "up": contentMove.xFrom = 0; contentMove.xTo = 0; contentMove.yFrom = content.height; contentMove.yTo = 0; imageMove.xFrom = 0; imageMove.xTo = 0; imageMove.yFrom = 0; imageMove.yTo = - content.height; break; case "down": contentMove.xFrom = 0; contentMove.xTo = 0; contentMove.yFrom = -content.height; contentMove.yTo = 0; imageMove.xFrom = 0; imageMove.xTo = 0; imageMove.yFrom = 0; imageMove.yTo = content.height; break; case "left": contentMove.xFrom = content.width; contentMove.xTo = 0; contentMove.yFrom = 0; contentMove.yTo = 0; imageMove.xFrom = 0; imageMove.xTo = -content.width; imageMove.yFrom = 0; imageMove.yTo = 0; break; default: //right contentMove.xFrom = - content.width; contentMove.xTo = 0; contentMove.yFrom = 0; contentMove.yTo = 0; imageMove.xFrom = 0; imageMove.xTo = content.width; imageMove.yFrom = 0; imageMove.yTo = 0; break; } toggleVisibility(); } private function toggleVisibility() : void { content.selectedIndex = (content.selectedIndex+1)%content.numChildren; contentMove.target = content.selectedChild; } ]]--> </mx:Script>

参阅全部Demo源代码：

http://www.tricedesigns.com/portfolio/swipeEffect/srcview/index.html

下载全部源代码：

http://www.tricedesigns.com/portfolio/swipeEffect/srcview/SwipeEffect.zip

 

【国内下载】Flex 3 Builder :http://g.csdn.net/5120749
【国内下载】Adobe Flash Builder 4 :http://g.csdn.net/5105812
【官方下载】Flex 3 Builder :http://g.csdn.net/5121278
【官方下载】Adobe Flash Builder 4 :http://g.csdn.net/5120750