[JS思路]运动框架思路

匀速运动的思路一：

1、先清除动画，再加载动画

2、方向dir有正值和负值，可以通过

　　目标值 > 当前值  往右移动，即正数

　　目标值 < 当前值  往右移动，即负数

　　来进行判断：dir = 目标值>当前值 ? dir : -dir;

　　speed = 当前值+方向dir

3、如果speed>=目标点，可以将speed=目标点，并清除动画。

 　speed>=目标点 && dir>0  || speed<=目标点 && dir<0  来判断

4、如果需要做opacity的动画，需要设定一个变量进行操作（方向同上）

     opacity:1;

　　filter:alpha(opacity:100);  IE9以下不支持

 匀速运动的思路二：

1、速度有正有负，可以通过

　　目标值>当前值，向右移动，为正数

　　目标值<当前值，向左移动，为负数

　　来进行判断：

　　var speed = 7;

　　speed =目标值>当前值 ? speed : -speed;

2、判断是否到达目标点

　　如果到达目标点（在附近），停止动画并把当前值赋值目标点  =>判断取绝对值，即Math.abs(当前值－目标值)<7

　　没到目标点：当前值+ speed +'px'

缓冲运动：

1、当前值离目标值越近，速度越慢

     当前值离目标值越远，速度越快

     speed = (目标值－当前值)/10

2、与目标点相差一点，需要进行判断

　　目标值>当前值，需要对速度向上取整，即speed = Math.ceil(speed)

　　目标值<当前值，需要对速度向下取整，即speed = Math.floor(speed)

3、如果当前值＝目标值，清除动画

4、潜在问题，BOX在屏幕的中间的情况，会产生来回抖动，原因是：目标值/2，取个整数就可以解决问题parseInt。