论坛风格切换切换到宽版
  • 6575阅读
  • 0回复

Spark Effects 动画效果 Fade 渐变 淡入淡出 组件改变大小 [复制链接]

上一主题 下一主题
 

发帖
1076
只看楼主 倒序阅读 使用道具 楼主  发表于: 2011-02-24
— 本帖被 jinwyp 执行置顶操作(2011-05-31) —
Flex4和Flex4.5 里面 最酷的部分莫过于动画效果 Spark effects  其中包括以下几种效果
Property effects属性特效,通过多个属性的变化针对到一个组件上发生的效果, 有以下4种
Animate 动画效果
Fade 通过alpha 属性的 淡入淡出效果
Resize 通过改变width 和 height 属性 达到变大变小的效果
AnimateColor 颜色属性改变效果 例如背景 或字体颜色

Transform effects变化效果 例如拉伸,旋转,可以多个效果并行同时发生
Pixel-shader effects通过bitmap 像素级的变化效果
Filter effects过滤效果,也可以理解为在包含多个组件中,只让某些组件发生变化的效果结构.
3D effects3D转换效果


http://help.adobe.com/zh_CN/flex/using/WS4809A78C-9738-465d-B875-B0049C9B0ED4.html
效果可以直接作用于 任何Spark或MX组件, 和在 spark.primitives package 包中的图形组件 例如Rect, Ellipse,  path  还可以用于 包含效果作用的任何对象上

spark.effects 里面的 Fade 效果 淡入淡出
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/spark/effects/Fade.html

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf5fdc3-7fef.html

在 Flex 里面 <fx:Declarations>标签中可以直接使用 特效

其中 duration="2000"  标签 代表动画持续的效果时间 单位毫秒
Effect.startDelay 标签 表面首次动画开始之前的需要多长时间延迟才开始动画,单位毫秒 必须大于等于0
Effect.repeatCount 标签 代表效果重复次数   Effect.repeatDelay 代表每次重复之前的延迟时间

  1. <fx:Declarations>
  2.         <s:Fade id="slowFade"
  3.             duration="2000"
  4.             target="{myButton1}"/>
  5. </fx:Declarations>


Parallel 该标签可以使多个效果同时播放,注意多个效果不能同时修改 同一个目标组件的属性.
Sequence 该标签可以是多个效果按照顺序播放,
请看下面范例


  1. <?xml version="1.0"?>
  2. <!-- behaviors\CompositeEffects.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:mx="library://ns.adobe.com/flex/mx"
  5.     xmlns:s="library://ns.adobe.com/flex/spark">
  6.     <s:layout>
  7.         <s:VerticalLayout/>
  8.     </s:layout>
  9.     
  10.     <fx:Declarations>
  11.         <s:Sequence id="fadeResizeHide"
  12.             target="{aTextArea}"
  13.             duration="1000">
  14.             <s:Fade id="fadeHide"
  15.                 alphaFrom="1.0"
  16.                 alphaTo="0.0"/>
  17.             <s:Resize id="resizeHide"
  18.                 widthTo="0"
  19.                 heightTo="0"/>
  20.         </s:Sequence>        
  21.         <s:Parallel id="fadeResizeShow"
  22.             target="{aTextArea}"
  23.             duration="1000">
  24.             <s:Resize id="resizeShow"
  25.                 widthTo="100"
  26.                 heightTo="50"/>
  27.             <s:Fade id="fadeShow"
  28.                 alphaFrom="0.0"
  29.                 alphaTo="1.0"/>
  30.         </s:Parallel>
  31.     </fx:Declarations>
  32.     <s:TextArea id="aTextArea"
  33.         width="100" height="50"
  34.         text="Hello world."/>
  35.     <s:Button id="myButton2"
  36.         label="Hide!"
  37.         click="fadeResizeHide.end();fadeResizeHide.play();"/>
  38.     <s:Button id="myButton1"
  39.         label="Show!"
  40.         click="fadeResizeShow.end();fadeResizeShow.play();"/>
快速回复
限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
上一个 下一个