匀速运动的思路一:
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。