Flex制作Parallel组合效果

最新推荐文章于 2015-04-01 14:30:02 发布

iteye_1034

最新推荐文章于 2015-04-01 14:30:02 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： flex 文章标签： Flex XML

本文链接：https://blog.youkuaiyun.com/iteye_1034/article/details/82073900

flex 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用Flex制作Parallel组合效果，通过将多个自定义效果（如旋转、移动和淡出）组合在一起，实现丰富的交互体验。文章提供了一个具体示例，展示了如何在鼠标按下图片时触发一系列流畅的视觉变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天，偶要着重介绍用Flex制作Parallel组合效果. Parallel组合效果,就是由一系列自定义的效果（如Glow,Fade,Zoom,Resize等）组合而成。这些效果如果单独使用，可能效果不是很理想，仍然比较单调，一旦组合起来之后，在应用中就发挥许多意想不到的效果。当然，这并不是说，我们在应用时，就滥用。我们一定要在应用此效果前先规划一下，否则就会得不偿失。

举个例子，假定用鼠标按下一幅图片，图片旋转一圈子，然后移动到一个地方，最后渐渐消失。这种效果，我们可以考虑用Parallel组合效果来制作。根据情况我们将组合旋转（Rotate)，移动(Move),溶解(Dissolve)效果.

代码如下：


    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#03BF7A, #075F96]">
    <mx:Parallel id="Parallel1">
        <mx:Rotate id="Rotate1"  originX="442" originY="76" angleFrom="0" angleTo="360" duration="1000" />
     <mx:Move id="Move1"    xTo="100"    yTo="400"  duration="1000"  />
     <mx:Fade id="Fade1"    alphaFrom="1" alphaTo="0"   duration="1000" />
    </mx:Parallel>

   <mx:Image x="442" y="76" source="images/C.jpg" mouseDownEffect="{Parallel1}" width="318" height="316"/>
   <mx:Label x="476" y="33" text="Flex制作Move移动效果" width="273" fontWeight="bold" fontSize="24" color="#F7F9FB"/>
 </mx:Application>