运动

匀速运动核心:

1.利用定时器在指定时间加相同的数值

2.目标位置 = 当前位置 + 步长(步长为定值)

缓动运动:

1.核心:利用移动过程中目标位置到当前位置的不同,来实现控制步长的增长幅度变小

2.步长 = (目标位置-当前位置)/10

var step = (targetValue - current) / 10 > 0 ? Math.ceil((targetValue - current) / 10) : Math.floor((targetValue - current) / 10) (注意:此处需要取整,一个原因是javascript进行高精度计算会有误差,另一个原因是不取整后面有很多小数会导致到达不了目标值,从而无法关闭定时器)

3.此处处理透明度opacity需要另外设置步长,并且在最后给目标元素赋值时除去相应的值

3.核心公式都是目标位置 = 当前位置 + 步长

抛物线:

1.水平方向和垂直方向增加的比例不同

2.通过给x方向的步长或y方向的步长来自增