flex 常用动画效果

<?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:local="*"
               minWidth="955" minHeight="600">
    <!--<s:layout>
        <s:VerticalLayout/>
    </s:layout>-->

    <fx:Script>
        <![CDATA[
            import mx.effects.Blur;
            import mx.effects.Dissolve;
            import mx.effects.Parallel;
            import mx.effects.Sequence;

            import spark.effects.Fade;
            import spark.effects.Scale;
            import spark.effects.Wipe;
            import spark.effects.easing.Bounce;
            import spark.effects.easing.EaseInOutBase;
            import spark.effects.easing.Elastic;
            import spark.effects.easing.Linear;
            import spark.effects.easing.Sine;

            spark.effects.Fade;
            spark.effects.Wipe;
            spark.effects.Scale;

            //模糊
            mx.effects.Blur;
            //中心扩大或缩小
            mx.effects.Iris;
            //溶解
            mx.effects.Dissolve;
            //霓虹灯
            mx.effects.Glow

            mx.effects.Sequence;
            mx.effects.Parallel;

            //物体重力下落,落地回弹
            spark.effects.easing.Bounce;

            //缓入缓出
            spark.effects.easing.EaseInOutBase;

            //正弦波衰减
            spark.effects.easing.Elastic;

            //线性加速,减速,匀速
            spark.effects.easing.Linear;

            //正弦波动
            spark.effects.easing.Sine;
        ]]>
    </fx:Script>

    <!--<s:transitions>
    <s:Transition fromState="up" toState="down">
        <s:Sequence>
            <s:Fade target="{upperGrid}" />
            <s:RemoveAction target="{upperGrid}" />
            <s:Move target="{panel1}" />
            <s:AddAction target="{lowerGrid}" />
            <s:Fade target="{lowerGrid}" />
        </s:Sequence>
    </s:Transition>-->

    <fx:Declarations>
        <!--重力回弹-->
        <s:Bounce id="bounce"/>

        <!--中心向外扩大-->
        <mx:Iris id="irisOut" duration="1000" showTarget="true"/>
        <!--外部向中心缩小-->
        <mx:Iris id="irisIn" duration="1000" showTarget="false"/>

        <!--闪光-->
        <mx:Glow/>


        <!--整体渐出-->
        <s:Fade id="fadeOut" alphaFrom="0" alphaTo="1"
                duration="1000" easer="{bounce}"/>
        <!--整体渐出-->
        <s:Fade id="fadeIn" alphaFrom="1" alphaTo="0"
                duration="1000" easer="{bounce}"/>

        <!--移动-->
        <s:Move id="zd" xBy="500" duration="1500"
                target="{test}" easer="{bounce}"/>

        <!--大小-->
        <s:Resize/>

        <s:Wipe/>
    </fx:Declarations>
    <!--<s:Animate id="mover" target="{button}" duration="1000">
        <s:SimpleMotionPath property="x" valueFrom="0" valueTo="100"/>
        <s:SimpleMotionPath property="y" valueTo="100"/>
        <s:SimpleMotionPath property="width" valueBy="20"/>
    </s:Animate>-->
    <s:Panel  id="test" >
    </s:Panel>
    <s:Button  click="zd.end();zd.play();" y="400"/>
</s:Application>

我只想说一句:如果你手动加了布局的话,一些位置变化的动画,你死活看不到效果.

如何用:
1.一个动画用在一个对象上.
2.一个动画用在一组对象上.
3.多组动画用在一个对象上(可以是先后,也可以是同时发生)
4.任意组合.

动画什么时候用:
1.通过普通事件调用,比如一个按钮的点击
2.通过effect属性,其实是一些特殊的事件,比如UI加载完毕,子UI被移除等
3.通过视图状态发生改变的时候调用transations里面写的动画

其实都是触发了某种事件而播放动画效果.事件模型是flex的核心!

flex 从2013年开源以后,发展十分的慢.flex 本身有很多bug.也不见有人去修复.
还有一些砖家说,flex搞桌面程序不错.我想也凑合吧.
flex 最大的用处不是做表单,表格,这些东西.它最擅长的是效果展示啊.图片渲染那么强!!别忘了它一开始就是动画发展来的.你不去用它的动画效果,图片显示效果(比如一些滤镜等),几乎是浪费了flex!!!

Flex的优点是动画,做网络拓扑,动画展示还是不错的.尤其是桌面程序.但是它迟早会淘汰的.因为apache flex 从今年的3月出的4.14的版本一来的,8个月都不见更新了.以后这个东西就渐渐的被遗忘….,我也决定不再写flex的博客了.这是最后一篇.