Flex【原创】惯性定位效果

　　最近有一个需求：显示对象从一个点以惯性运动的方式运动到另外一个点。

　　感觉就好像定位功能的特效一样，缓动到目标点。

　　小弟专门为此封装了这个功能，废话不说，贴代码，给Demo。

　　版本Flex4.6

　　一共2个类：

 

　　1：核心算法类 EaseTween

package 
{
    import flash.display.DisplayObject;
    import flash.events.Event;
  5 
    /**
     * DisplayObject惯性定位效果
     * 
     *    <br>s = (d-a) + (d-2*a) + (d-3*a) + … + (d-n*a)</br>
     *    <br>d - n*a = 0</br>
     *    <br>===></br>
     *    <br>d = 2*s/(n-1)</br>
     *    <br>a = 2*s/(n*n-n)</br>
     * 
     * @date 2012.03.20
     * @version 0.2
     * @author yaoyf
     * **/
    public class EaseTween
    {
        /**
         * @private
         * */
        private static var _diso:DisplayObject;
        private static var _offsetX:Number;
        private static var _offsetY:Number;
        private static var _totalDistance:Number;
        private static var _currentDistance:Number;
 29         
        /**
         * @private
         * */
        private static var _accelerationX:Number;
        private static var _accelerationY:Number;
        private static var _defualtSpeedX:Number;
        private static var _defualtSpeedY:Number;
 37         
        private static var _times:int = 0;//执行帧数
        private static var _ratio:int;//距离/执行帧数 = ratio = speed
        
        /**
         * 执行缓动效果
         * 
         * @param diso:diso
         * @param offsetX:Number diso的x轴偏移量
         * @param offsetY:Number diso的y轴偏移量
         * @param speed:Number 定位速度(default = 10)
         * 
         * @error ErrorX3233:Arguments speed must be greater than 0
         * 
         *     @date 2012.03.20
         * @version 0.2
         * @author yaoyf
         * **/
        public static function doEaseEffect(diso:DisplayObject,offsetX:Number=0,offsetY:Number = 0,speed:Number=20):void{
            _diso = diso;
            if(offsetX == 0 && offsetY == 0){
                _diso.dispatchEvent(new EaseEffectEvent(EaseEffectEvent.EVT_EASE_DEFAULT));
                return;
            }
            if(speed == 0)return;
            if(speed < 0){
                throw new Error("ErrorX3233:Arguments speed must be greater than 0");
            }
            _diso.dispatchEvent(new EaseEffectEvent(EaseEffectEvent.EVT_EASE_BEGIN));
            _offsetX = -offsetX;
            _offsetY = -offsetY;
            _currentDistance = 0;
            _totalDistance = getDistance(_offsetX,_offsetY);
            _ratio = speed;
            _times = _totalDistance / _ratio;
            var dis:Number = 2 * _totalDistance / (_times - 1);
            var acceleration:Number = 2 * _totalDistance / (_times * (_times - 1));
            var rio:Number = offsetX / offsetY;
            _defualtSpeedX = getVector(dis,rio,"x"); 
            _defualtSpeedY = getVector(dis,rio,"y"); 
            _accelerationX = getVector(acceleration,rio,"x");
            _accelerationY = getVector(acceleration,rio,"y");
            diso.addEventListener(Event.ENTER_FRAME, onEaseEnterFrame);
        }
 81         
        //onEnterFrame
        private static function onEaseEnterFrame(e:Event):void{
            _defualtSpeedX -= _accelerationX;
            _defualtSpeedY -= _accelerationY;
            doPan(_defualtSpeedX,_defualtSpeedY);
            _currentDistance += getDistance(_defualtSpeedX,_defualtSpeedY);
            if(_currentDistance >= _totalDistance){
                _diso.removeEventListener(Event.ENTER_FRAME, onEaseEnterFrame);
                _diso.dispatchEvent(new EaseEffectEvent(EaseEffectEvent.EVT_EASE_END));
            }
        }
 93         
        //平移
        private static function doPan(valueX:Number,valueY:Number):void{
            if(_offsetX < 0 && _offsetY >= 0){    
                _diso.x += valueX;
                _diso.y -=  valueY;
            }else if(_offsetY < 0 && _offsetX >= 0){
                _diso.x -=  valueX;
                _diso.y +=  valueY;
            }else if(_offsetY < 0 && _offsetX < 0){
                _diso.x +=  valueX;
                _diso.y +=  valueY;
            }else{
                _diso.x -=  valueX;
                _diso.y -=  valueY;
            }
            _diso.dispatchEvent(new EaseEffectEvent(EaseEffectEvent.EVT_EASING));
        }
111         
        //获取x，y轴分向量长度
        private static function getVector(dis:Number,rio:Number,type:String):Number{
            switch(type)
            {
                case "x" :
                    if(Math.abs(rio) == Infinity){
                        return dis;
                    }else{
                        return Math.abs(rio * Math.sqrt(dis * dis / (rio * rio  + 1)));
                    }
                    break;
                case "y" :
                    if(Math.abs(rio) == Infinity){
                        return 0;
                    }else{
                        return Math.abs(Math.sqrt(dis * dis / (rio * rio  + 1)));
                    }
                    break;
                default :
                    break;
            }
            return 0;
        }
135         
        //勾股函数 获取斜边长度
        private static function getDistance(deltaX:Number,deltaY:Number):Number{
            return Math.sqrt(deltaX*deltaX + deltaY*deltaY);
        }
140         
    }
}

2：相关事件类

package
{
    import flash.events.Event;
    
    /**
     * 定位缓动事件类
     * 
     * @date 2012.03.20
     * @version 0.2
     * @author yaoyf
     * **/
    public class EaseEffectEvent extends Event
    {
        /**定义 EVT_EASE_DEFAULT事件的type属性,offect为零，不执行缓动**/
        public static const EVT_EASE_DEFAULT:String = "easeDefaultEvt";
        
        /**定义 EVT_EASE_BEGIN事件的type属性,缓动开始**/
        public static const EVT_EASE_BEGIN:String = "easeBeginEvt";
        
        /**定义 EVT_EASING事件的type属性,缓动中**/
        public static const EVT_EASING:String = "easingEvt";
        
        /**定义 EVT_MOUSE_HOLDON_DOWN事件的type属性,缓动结束**/
        public static const EVT_EASE_END:String = "easeEndEvt";
        
        /**
         * 构造方法 
         * @param type 事件类型
         * @param bubbles  确定 Event 对象是否参与事件流的冒泡阶段。默认值为 false
         * @param cancelable 确定是否可以取消 Event 对象。默认值为 false
         */    
        public function EaseEffectEvent(type:String,bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
        
        /**
         * 克隆
         */
        override public function clone():Event
        {
            return new EaseEffectEvent(type,bubbles,cancelable);
        }
        /**
         * 字符串转换
         */
        override public function toString():String
        {
            return formatToString("EaseEffectEvent","type","bubbles","cancelable","eventPhase");
        }
        
    }
}

调用事例：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       initialize="windowedapplication1_initializeHandler(event)">
    
    <fx:Script>
        <![CDATA[
            import flash.crypto.generateRandomBytes;
            
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            
            protected function windowedapplication1_initializeHandler(event:FlexEvent):void
            {
                this.maximize();
                diso.addEventListener(EaseEffectEvent.EVT_EASE_DEFAULT,onEaseDefualt);
                diso.addEventListener(EaseEffectEvent.EVT_EASE_BEGIN,onEaseBegin);
                diso.addEventListener(EaseEffectEvent.EVT_EASE_END,onEaseEnd);
                diso.addEventListener(EaseEffectEvent.EVT_EASING,onEasing);
            }
            
            protected function onEaseBegin(event:Event):void
            {
                trace("onEaseBegin");
            }
            
            protected function onEasing(event:Event):void
            {
                trace("onEasing");
                diso.setStyle("backgroundColor",Math.random()*0xEEEEEE);
            }
            
            protected function onEaseEnd(event:Event):void
            {
                trace("onEaseEnd");
            }
            
            protected function onEaseDefualt(event:Event):void
            {
                Alert.show("error !");
            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:Label id="diso" x="385" y="241" width="45" height="45" backgroundColor="0x123456"/>
    <s:HGroup top="10">
        <s:Label text="deltaX:" verticalAlign="middle" height="20"/>
        <s:TextInput id="txt1"/>
        <s:Label text="deltaY:" verticalAlign="middle" height="20"/>
        <s:TextInput id="txt2"/>
        <s:Label text="speed:" verticalAlign="middle" height="20"/>
        <s:TextInput id="txt3"/>
        <s:Button x="405" y="10" label="doPan"
                  click="EaseTween.doEaseEffect(diso,Number(txt1.text),Number(txt2.text),Number(txt3.text))"/>
    </s:HGroup>
    <s:Label id="lbl" left="10" bottom="10" text="{'( ' + diso.x  + ' , ' + diso.y + ' )'}"/>
</s:WindowedApplication>

效果图：

 

　　

　　Demo下载：https://files.cnblogs.com/loveFlex/Sample_fixedPposition.rar