Flex中如何控制Accordion容器内当前项目改变时延迟效果的例子

By Minidxer | August 14, 2008

和前面Flex中在改变ColorPicker选取颜色时动态延迟效果的例子比较类似的，接下来的例子演示了Flex中如何控制Accordion容器内当前项目改变时延迟效果。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. and-easing-functions/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white"
  7.         creationComplete="init()">
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.             import mx.effects.easing.*;
  12.  
  13.             private function init():void {
  14.                 /**    Back */
  15.                 arrColl.addItem({label:"Back.easeIn", func:Back.easeIn});
  16.                 arrColl.addItem({label:"Back.easeOut", func:Back.easeOut});
  17.                 arrColl.addItem({label:"Back.easeInOut", func:Back.easeInOut});
  18.                 /** Bounce */
  19.                 arrColl.addItem({label:"Bounce.easeIn", func:Bounce.easeIn});
  20.                 arrColl.addItem({label:"Bounce.easeOut", func:Bounce.easeOut});
  21.                 arrColl.addItem({label:"Bounce.easeInOut", func:Bounce.easeInOut});
  22.                 /** Circular */
  23.                 arrColl.addItem({label:"Circular.easeIn", func:Circular.easeIn});
  24.                 arrColl.addItem({label:"Circular.easeOut", func:Circular.easeOut});
  25.                 arrColl.addItem({label:"Circular.easeInOut", func:Circular.easeInOut});
  26.                 /** Cubic */
  27.                 arrColl.addItem({label:"Cubic.easeIn", func:Cubic.easeIn});
  28.                 arrColl.addItem({label:"Cubic.easeOut", func:Cubic.easeOut});
  29.                 arrColl.addItem({label:"Cubic.easeInOut", func:Cubic.easeInOut});
  30.                 /** Elastic */
  31.                 arrColl.addItem({label:"Elastic.easeIn", func:Elastic.easeIn});
  32.                 arrColl.addItem({label:"Elastic.easeOut", func:Elastic.easeOut});
  33.                 arrColl.addItem({label:"Elastic.easeInOut", func:Elastic.easeInOut});
  34.                 /** Exponential */
  35.                 arrColl.addItem({label:"Exponential.easeIn", func:Exponential.easeIn});
  36.                 arrColl.addItem({label:"Exponential.easeOut", func:Exponential.easeOut});
  37.                 arrColl.addItem({label:"Exponential.easeInOut", func:Exponential.easeInOut});
  38.                 /** Linear */
  39.                 arrColl.addItem({label:"Linear.easeIn", func:Linear.easeIn});
  40.                 arrColl.addItem({label:"Linear.easeOut", func:Linear.easeOut});
  41.                 arrColl.addItem({label:"Linear.easeInOut", func:Linear.easeInOut});
  42.                 /** Quadratic */
  43.                 arrColl.addItem({label:"Quadratic.easeIn", func:Quadratic.easeIn});
  44.                 arrColl.addItem({label:"Quadratic.easeOut", func:Quadratic.easeOut});
  45.                 arrColl.addItem({label:"Quadratic.easeInOut", func:Quadratic.easeInOut});
  46.                 /** Quartic */
  47.                 arrColl.addItem({label:"Quartic.easeIn", func:Quartic.easeIn});
  48.                 arrColl.addItem({label:"Quartic.easeOut", func:Quartic.easeOut});
  49.                 arrColl.addItem({label:"Quartic.easeInOut", func:Quartic.easeInOut});
  50.                 /** Quintic */
  51.                 arrColl.addItem({label:"Quintic.easeIn", func:Quintic.easeIn});
  52.                 arrColl.addItem({label:"Quintic.easeOut", func:Quintic.easeOut});
  53.                 arrColl.addItem({label:"Quintic.easeInOut", func:Quintic.easeInOut});
  54.                 /** Sine */
  55.                 arrColl.addItem({label:"Sine.easeIn", func:Sine.easeIn});
  56.                 arrColl.addItem({label:"Sine.easeOut", func:Sine.easeOut});
  57.                 arrColl.addItem({label:"Sine.easeInOut", func:Sine.easeInOut});
  58.             }
  59.         ]]>
  60.     </mx:Script>
  61.  
  62.     <mx:ArrayCollection id="arrColl" />
  63.  
  64.     <mx:ApplicationControlBar dock="true">
  65.         <mx:Label text="openEasingFunction:" />
  66.         <mx:ComboBox id="openEasingFunc"
  67.                 dataProvider="{arrColl}" />
  68.  
  69.         <mx:Label text="openDuration:" />
  70.         <mx:HSlider id="openDur"
  71.                 minimum="100"
  72.                 maximum="1500"
  73.                 value="1000"
  74.                 liveDragging="true"
  75.                 snapInterval="100"
  76.                 tickInterval="100"
  77.                 dataTipPrecision="0" />
  78.     </mx:ApplicationControlBar>
  79.  
  80.     <mx:Accordion width="400" height="120"
  81.             openDuration="{openDur.value}"
  82.             openEasingFunction="{openEasingFunc.selectedItem.func}">
  83.         <mx:VBox id="child1" label="Child 1" />
  84.         <mx:VBox id="child2" label="Child 2" />
  85.         <mx:VBox id="child3" label="Child 3" />
  86.     </mx:Accordion>
  87.  
  88. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | No Comments » | Tags: , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll