Flex中如何通过自定义duration和easing函数使用户点击HSlider或VSlider滑轮时产生特定效果的例子
By Minidxer | September 14, 2008
接下来的例子演示了Flex中如何通过自定义duration和easing函数，使用户点击HSlider或VSlider滑轮时产生特定效果。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
下面是完整代码(或点击这里察看)：
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white"
- creationComplete="init();">
- <mx:Script>
- <![CDATA[
- import mx.events.ListEvent;
- import mx.events.NumericStepperEvent;
- import mx.effects.easing.*;
- private var arr:Array;
- private function init():void {
- arr = new Array();
- arr.push({label:"Elastic.easeInOut", func:Elastic.easeInOut});
- arr.push({label:"Bounce.easeOut", func:Bounce.easeOut});
- arr.push({label:"Back.easeIn", func:Back.easeIn});
- easingFunc.dataProvider = arr;
- }
- private function duration_change(evt:NumericStepperEvent):void {
- slider.setStyle("slideDuration", evt.value);
- }
- private function easingFunc_change(evt:ListEvent):void {
- slider.setStyle("slideEasingFunction", easingFunc.selectedItem.func);
- }
- ]]>
- </mx:Script>
- <mx:ApplicationControlBar dock="true">
- <mx:Label text="slideDuration:" />
- <mx:NumericStepper id="duration"
- minimum="0"
- maximum="2000"
- value="300"
- stepSize="100"
- change="duration_change(event);" />
- <mx:Label text="slideEasingFunction:" />
- <mx:ComboBox id="easingFunc"
- change="easingFunc_change(event);"
- prompt="Please select an easing function..." />
- </mx:ApplicationControlBar>
- <mx:HSlider id="slider" showTrackHighlight="true" tickInterval="1" />
- </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子
Topics:
Flex |
Tags: easing, HSlider, slideDuration, slideEasingFunction, Slider, VSlider