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

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

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

  版本Flex4.6

  一共2个类:

  1:核心算法类 EaseTween

  1 package   2 {  3     import flash.display.DisplayObject;  4     import flash.events.Event;  5   6     /**  7      * DisplayObject惯性定位效果  8      *   9      *    <br>s = (d-a) + (d-2*a) + (d-3*a) + … + (d-n*a)</br> 10      *    <br>d - n*a = 0</br> 11      *    <br>===></br> 12      *    <br>d = 2*s/(n-1)</br> 13      *    <br>a = 2*s/(n*n-n)</br> 14      *  15      * @date 2012.03.20 16      * @version 0.2 17      * @author yaoyf 18      * **/ 19     public class EaseTween 20     { 21         /** 22          * @private 23          * */ 24         private static var _diso:DisplayObject; 25         private static var _offsetX:Number; 26         private static var _offsetY:Number; 27         private static var _totalDistance:Number; 28         private static var _currentDistance:Number; 29          30         /** 31          * @private 32          * */ 33         private static var _accelerationX:Number; 34         private static var _accelerationY:Number; 35         private static var _defualtSpeedX:Number; 36         private static var _defualtSpeedY:Number; 37          38         private static var _times:int = 0;//执行帧数 39         private static var _ratio:int;//距离/执行帧数 = ratio = speed 40          41         /** 42          * 执行缓动效果 43          *  44          * @param diso:diso 45          * @param offsetX:Number diso的x轴偏移量 46          * @param offsetY:Number diso的y轴偏移量 47          * @param speed:Number 定位速度(default = 10) 48          *  49          * @error ErrorX3233:Arguments speed must be greater than 0 50          *  51          *     @date 2012.03.20 52          * @version 0.2 53          * @author yaoyf 54          * **/ 55         public static function doEaseEffect(diso:DisplayObject,offsetX:Number=0,offsetY:Number = 0,speed:Number=20):void{ 56             _diso = diso; 57             if(offsetX == 0 && offsetY == 0){ 58                 _diso.dispatchEvent(new EaseEffectEvent(EaseEffectEvent.EVT_EASE_DEFAULT)); 59                 return; 60             } 61             if(speed == 0)return; 62             if(speed < 0){ 63                 throw new Error("ErrorX3233:Arguments speed must be greater than 0"); 64             } 65             _diso.dispatchEvent(new EaseEffectEvent(EaseEffectEvent.EVT_EASE_BEGIN)); 66             _offsetX = -offsetX; 67             _offsetY = -offsetY; 68             _currentDistance = 0; 69             _totalDistance = getDistance(_offsetX,_offsetY); 70             _ratio = speed; 71             _times = _totalDistance / _ratio; 72             var dis:Number = 2 * _totalDistance / (_times - 1); 73             var acceleration:Number = 2 * _totalDistance / (_times * (_times - 1)); 74             var rio:Number = offsetX / offsetY; 75             _defualtSpeedX = getVector(dis,rio,"x");  76             _defualtSpeedY = getVector(dis,rio,"y");  77             _accelerationX = getVector(acceleration,rio,"x"); 78             _accelerationY = getVector(acceleration,rio,"y"); 79             diso.addEventListener(Event.ENTER_FRAME, onEaseEnterFrame); 80         } 81          82         //onEnterFrame 83         private static function onEaseEnterFrame(e:Event):void{ 84             _defualtSpeedX -= _accelerationX; 85             _defualtSpeedY -= _accelerationY; 86             doPan(_defualtSpeedX,_defualtSpeedY); 87             _currentDistance += getDistance(_defualtSpeedX,_defualtSpeedY); 88             if(_currentDistance >= _totalDistance){ 89                 _diso.removeEventListener(Event.ENTER_FRAME, onEaseEnterFrame); 90                 _diso.dispatchEvent(new EaseEffectEvent(EaseEffectEvent.EVT_EASE_END)); 91             } 92         } 93          94         //平移 95         private static function doPan(valueX:Number,valueY:Number):void{ 96             if(_offsetX < 0 && _offsetY >= 0){     97                 _diso.x += valueX; 98                 _diso.y -=  valueY; 99             }else if(_offsetY < 0 && _offsetX >= 0){100                 _diso.x -=  valueX;101                 _diso.y +=  valueY;102             }else if(_offsetY < 0 && _offsetX < 0){103                 _diso.x +=  valueX;104                 _diso.y +=  valueY;105             }else{106                 _diso.x -=  valueX;107                 _diso.y -=  valueY;108             }109             _diso.dispatchEvent(new EaseEffectEvent(EaseEffectEvent.EVT_EASING));110         }111         112         //获取x,y轴分向量长度113         private static function getVector(dis:Number,rio:Number,type:String):Number{114             switch(type)115             {116                 case "x" :117                     if(Math.abs(rio) == Infinity){118                         return dis;119                     }else{120                         return Math.abs(rio * Math.sqrt(dis * dis / (rio * rio  + 1)));121                     }122                     break;123                 case "y" :124                     if(Math.abs(rio) == Infinity){125                         return 0;126                     }else{127                         return Math.abs(Math.sqrt(dis * dis / (rio * rio  + 1)));128                     }129                     break;130                 default :131                     break;132             }133             return 0;134         }135         136         //勾股函数 获取斜边长度137         private static function getDistance(deltaX:Number,deltaY:Number):Number{138             return Math.sqrt(deltaX*deltaX + deltaY*deltaY);139         }140         141     }142 }
 
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下载:http://files.cnblogs.com/loveFlex/Sample_fixedPposition.rar

转载于:https://www.cnblogs.com/loveFlex/archive/2012/03/22/2411673.html

Flex【原创】惯性定位效果相关推荐

  1. CSS中固定定位、相对定位、绝对定位以及flex布局高效定位

    CSS中固定定位.相对定位.绝对定位以及flex布局高效定位 一.固定布局 将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...

  2. Leaflet中使用leaflet-search插件实现搜索定位效果

    场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用插件实现搜索定位效果 ...

  3. 仿微信未读RecyclerView平滑滚动定位效果

    效果图有红点的地方表示有未读消息,依次双击首页图标定位,然后定位到某个未读在手动下滑一点距离在次点击定位效果 用过 RecyclerView 的人都知道,自带有几个滚动到item下标的方法,但是不靠谱 ...

  4. 惯性导航论文详解:神经惯性定位

    来源:投稿 作者:小灰灰 编辑:学姐 论文标题:Neural Inertial Localization 论文链接:  https://arxiv.org/pdf/2203.15851v1.pdf 图 ...

  5. 惯性定位导航(INS)

    原理 利用陀螺仪和加速度计测得目标运动速度.姿态等信息进行定位与导航. 定位精度 定位精度取决于仪器的精度,当前应用的陀螺仪主要有静电陀螺.环形激光陀螺以及干涉式光纤陀螺.近几年惯性定位导航技术不断发 ...

  6. 自定义 View 之联系人字母索引及定位效果

    博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主 威威喵 原创,请多支持与指教. 本文首发于此   博主:威威喵  |  博客主页:https://blog.csdn.net/ ...

  7. 麦克风阵列声源定位效果测试

    下列图片如果不清楚可以直接访问淘宝链接,从链接中的网盘资料进行拉取.从此链接看到的购买可以跟客服说,提我可以便宜50块钱~~~ 店铺链接:首页-智能语音开发者联盟-淘宝网 产品链接:https://i ...

  8. elementUI的table组件实现setCurrentRow的滚动条定位效果

    在github上咨询了,直接给了代码: https://jsfiddle.net/tk37c5cb/14/ 转载于:https://www.cnblogs.com/blueroses/p/852207 ...

  9. jquery页面滚动显示浮动菜单栏锚点定位效果

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <metahttp-equiv="Content-Type"c ...

最新文章

  1. MySQL 5.5 服务器变量详解(二)
  2. 开源一个天气APP Build with React Native
  3. Linux学习第三章
  4. 用数据可视化解读:为何2亿国人爱钓鱼
  5. Common Lisp 操作Mysql
  6. 浅谈深度学习(Deep Learning)的基本思想和方法
  7. Unreal Engine 4 —— 冷却UI的制作
  8. Salt 系统初始化
  9. 自动驾驶——多目标跟踪模块的学习笔记
  10. 思维方法和高效学习及记忆法总结
  11. 思杰桌面虚拟化Citrix XenDesktop
  12. LTE网络中的无线安全的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  13. arduino入门教程!保姆级细致教学!
  14. Spring 02
  15. Mac快捷键及手势基本操作
  16. Matlab -----求矩阵特征多项式和特征值
  17. 计算机算法对程序设计的作用,【程序设计论文】高中算法与程序设计教学意义及有效性(共3796字)...
  18. 云计算在互动电视上的商业应用
  19. c语言在数学方面的应用编程,浅谈数学在C语言编程中的应用.doc
  20. MMGG聚焦 | InfinitySkies - Polygon上面的无限天空

热门文章

  1. 【转】MongoDB介绍及下载与安装
  2. 征服 Redis + Jedis + Spring (一)—— 配置常规操作(GET SET DEL)
  3. javascript arguments(转)
  4. [置顶] 从零开始学C++之STL(二):实现简单容器模板类Vec(vector capacity 增长问题、allocator 内存分配器)...
  5. 动态表头_Excel制作动态考勤表及周六周日颜色标注
  6. java类注解是否可以通过实现接口或继承父类的方式获得
  7. “重疾险”和“重大疾病医疗保险”的区别
  8. C++实现类似反射模式
  9. ctypealpha php_PHP Ctype函数(转)
  10. golang博客推荐