匀速运动

　在原生javascript中实现运动的主要工具是定时器，通过设置固定的间隔时间，使元素在确定的间隔时间内实现距离的变化。而运动变化的主要表现形式是距离的变化
　例如，定时器频率可如下列代码所示，设置为30ms。每30ms对s的值进行更新，使其增加一个步长step的距离，来实现视觉上的元素运动效果

  1. setInterval(function(){
  2.     s = s + step
  3. },30)

这里我们先使用之前一节的样式获取函数

  1.         /**
  2.      * 获取对象的样式
  3.      * @param obj  元素对象
  4.      * @param type  样式名称
  5.      * @returns {*} 样式属性
  6.      */
  7. function getStyle(ele,type){
  8.   if(window.getCompuutedStyle){
  9.     // 正常浏览器
  10.     return getComputedStyle(obj,null)[type]
  11.   }else{
  12.     //IE 8
  13.     return obj.currentStyle[type]
  14.   }
  15. }

函数封装

  1.     /**
  2.      * 单个对象单个匀速运动
  3.      * @param ele 对象
  4.      * @param type 变化属性，-left-width
  5.      * @param target 目标值
  6.      * @param time    时间
  7.      */
  8. function uniformSpeed(ele,type,target,time){
  9.   // 当前的属性值,   已经移动的值
  10.   let cur = parseFloat(getStyle(ele,type)), 
  11.       move =cur;
  13.   if(target === cur) return ;
  14.   // 这里设置每秒钟刷新60次，每次刷新时间为16.7秒
  15.   let step = Math.floor((target-cur)/time*16.7*10000)/10000;
  17.   // 设置动画定时器
  18.   let timer = setInterval(()=>{
  19.     move += step;
  20.     // 设置清除条件
  21.     if(target>cur ? move>=target : move<=target){
  22.       ele.style[type] = target + 'px';
  23.       clearInterval(timer)
  24.     }else{
  25.        ele.style[type] = move + 'px';
  26.     }
  27.   },16.6)
  28. }

缺点：

这个虽然能实现简单的动画效果，但是还是有很多的缺陷，比如不能实现多个属性同时变换，不能对opacity，颜色等样式进行变换;

加速运动


说到加速运动，必须要提到一个物理名词——加速度
加速度： 动画函数 - 图1
实验用推论：Δs＝ aT^2 ｛Δs为连续相邻相等时间(T)内位移之差｝

我们还是用之前的那个公式 

  1. setInterval(function(){
  2.     s = s + step
  3. },30)

依靠上面的推断第n次20ms后与第一次的位移差的关系是
step = n * Δs

这里我们用20ms方便计算

  1.  /**
  2.      * 单个对象单个加速运动
  3.      * @param ele 对象
  4.      * @param type 变化属性，-left-width
  5.      * @param target 目标值
  6.      * @param time    时间
  7.      */
  8. function addSpeed(ele,type,target,time){
  9.    // 声明变量
  10.   let cur = parseFloat(getStyle(ele,type)), 
  11.       move = 0,
  12.       a = (target-cur)/time/time*2,  //加速度
  13.       step = a*20*20,   // 距离差 Δs＝ aT^2
  14.       move = cur,                // 移动的距离
  15.       times = 0;        // 循环多少次
  17.   if(target === cur) return ;
  20.   // 设置动画定时器
  21.   let timer = setInterval(()=>{
  22.     times ++;
  23.     move += times*step -1/2*step;  
  24.     // 设置清除条件
  25.     if(target>cur ? move>=target : move<=target){
  26.       ele.style[type] = target + 'px';
  27.       clearInterval(timer)
  28.     }else{
  29.        ele.style[type] = move + 'px';
  30.     }
  31.   },20)
  32. }

减速运动

对于减速运动来说我们可以设置他的初始速度稍大，在最后一步大于目标值时设置速度为0，并清除定时器

  1.  function descSpeed(ele,type,target,time) {
  2.         let cur = parseFloat(getStyle(ele,type)),
  3.             a = Math.floor((target-cur)/time/time*2*100000)/100000,
  4.             step = a*20*20,        
  5.             move = cur,            
  6.             times = Math.floor((time/20+3)*100000)/100000;   // 如果想要初始速度大一些可以设置+n
  7.         if(target === cur) return ;
  8.         // 设置动画定时器
  9.         let timer = setInterval(()=>{
  10.             move += times*step -1/2*step;
  11.             times --;
  12.             // 设置清除条件
  13.             if(target>cur ? move>=target : move<=target){
  14.                 ele.style[type] = target + 'px';
  15.                 clearInterval(timer)
  16.             }else{
  17.                 ele.style[type] = move + 'px';
  18.             }
  19.         },20)
  20.     }

缓存运动

缓冲运动就是当运动到目的地时速度干好是0，那么可以设置上面的n为0或者1；

加减速运动

半段运动时，做加速运动。到达指定点时，做减速运动，最终到达终点停止，
这里我就偷懒了一下，直接前半段调用加速运动，后半段调用减速运动；

  1. // 加速运动——增加了callback函数和callbak的参数options
  2. // 如果没有options则调用自身的函数的前几个参数，并且在清除定时器时调用回调函数
  3. //  function addSpeed(ele,type,target,time,callback,options)
  4. // 减速运动 
  5. // function descSpeed(ele,type,target,time,callback,options)
  6. // 加减速运动
  7.     function changeSpeed(ele,type,target,time) {
  8.         addSpeed(ele,type,target/2,time/2,descSpeed,[ele,type,target,time/2])
  9.     }

这里的回调函数的传参也可以使用 对象的方法 {fn:callback,options:[ele,type,target,time/2]]}

往复运动

定义：往复运动相当于加减速运动的升级版。元素先加速后减速，当减速到0时，元素并不停止，而是做反向的先加速后减速运动，如此反复
之前做加减速运动没有单独写一个，现在又得写，还需要再元素到达终点的时候改变他的目标值刷新值，重新设置下定时器，不行，于是又想个办法偷个懒

  1.     /**  往复运动
  2.      * @param ele
  3.      * @param type
  4.      * @param target
  5.      * @param time
  6.      */
  7.     function returnSpeed(ele,type,target,time) {
  8.         //  flag true为正向运动 false反向
  9.         let flag = false;
  10.         //  获取初始值
  11.         let cur = parseFloat(getStyle(ele,type));
  12.         let change = function(){
  13.             flag = !flag;
  14.             if(flag){
  15.                 // 正向运动，先加速再减速，最后再调用函数本身
  16.                 addSpeed(ele,type,target/2,time/2,descSpeed,[ele,type,target,time/2,change])
  17.             }else {
  18.                 addSpeed(ele,type,target/2,time/2,descSpeed,[ele,type,cur,time/2,change])
  19.             }
  20.         };
  21.         change()
  22.     }

封装一下

  1.     function animation(obj) {
  2.         if(obj.el === void 0){
  3.             throw new  Error ('You have to enter element')
  4.         }
  6.         // 适配器
  7.         let newObj = {
  8.             el: obj.el ,
  9.             type : obj.type || 'default',
  10.             time : obj.time || 1000,
  11.             style : obj.style || {},
  12.             callback: obj.callback
  13.         };
  15.         // 执行状态
  16.         let typeState = {
  17.             getStyle:(obj,name)=>{
  18.                 if(window.getComputedStyle){
  19.                     // //正常浏览器的方式，具有getComputedStyle（）方法
  20.                     return getComputedStyle(obj,null)[name]
  21.                 }else{
  22.                     //IE8的方式，没有getComputedStyle（）方法
  23.                     return obj.currentStyle[name];
  24.                 }
  25.             },
  27.             default : function(ele,type,target,time,callback){
  28.                 // 当前的属性值,   已经变化的值
  29.                 let  cur = parseFloat(typeState.getStyle(ele,type)),
  30.                     move =cur;
  32.                 if(target === cur) return ;
  33.                 // 这里设置每秒钟刷新60次，每次刷新时间为16.7秒
  34.                 let step = Math.floor((target-cur)/time*16.7*10000)/10000;
  36.                 // 设置动画定时器
  37.                 let timer = setInterval(()=>{
  38.                     move += step;
  39.                     // 设置清除条件
  40.                     if(target>cur ? move>=target : move<=target){
  41.                         ele.style[type] = target + 'px';
  42.                         clearInterval(timer);
  43.                         console.log(callback);
  44.                         callback && callback.fn && callback.fn(callback.arg)
  45.                     }else{
  46.                         ele.style[type] = move + 'px';
  47.                     }
  48.                 },16.6)
  49.             },
  51.             east_in : function () {
  53.             },
  54.             east_out:function () {
  56.             },
  57.             east_in_ou:function () {
  59.             },
  60.             toggle:function () {
  62.             }
  63.         };
  64.         //  样式状态
  65.         let style = {
  67.         };
  69.         // 遍历所有的并执行
  70.         Object.keys(newObj.style).forEach(function (k){
  71.             typeState[newObj.type](newObj.el ,k,newObj.style[k] ,newObj.time,newObj.callback)
  72.         });
  73.     }
  74.  // test
  75. let test = document.getElementsByClassName('test')[0];
  76.     animation({
  77.         el: test,
  78.         style:{
  79.             width:500,
  80.             height:600,
  81.             left: 200
  82.         },
  83.         callback: {
  84.             fn:function () {
  85.                 animation({
  86.                     el: test,
  87.                     style:{
  88.                         width:100,
  89.                         height:100,
  90.                     },
  91.                 })
  92.             },
  93.             arg:[]
  94.         }
  95.     });

这个封装是真的烂，待我再学一阵子再来完成它吧…….