运动运行。

运动原理:通过定时器持续改变某元素的属性。
匀速运动:每一次更改属性时,步长值是相同的。
1,注意css属性为数值的,才能够进行运动。比如width、height、
font-size、left、top等。
2,如果属性是left、top这种,需要有position才能进行运动。
3,很多时候,第一次获取属性值时,都需要用到获取非行间样式代码。
getCompotuedStyle(elem,null)[attr];//第二个是伪类属性,但是兼容性不好兼容到IE9+。
elem.currentStyle[attr];//IE8以下的方法。
4,设置属性时,要记得写单位。!!!!!
边界:即属性的目标值(终点);
碰撞:1个元素,共有上下左右4个边界,只要有1个边界发生接触。即认为碰撞。
回弹:到终点后,反向运动。
注意:
1,如果是到边界就停止运动的话,记得清除定时器。
2,如果步长不是1的话,有可能不会精确到边界,所以要做好边界条件,和到
条件时边界精确设置。
逐渐加速运动:
注意:1,很少用到逐渐加速运动。
逐渐减速运动(缓冲运动)。
原理:步长越来越小,就可以实现了缓冲运动了。
代码逻辑:
1,开启定时器,代码都写在定时器函数中。
2,获取当前元素的属性,即得到当前值。
3,目标值减当前值后,除以7,得到步长,即定时器执行一次所更新的属性值。
4,如果小于0,则向下取整;如果大于0,则向上取整。即每一次执行时,最小更新1单位,以左右移动举例,小于0表示从右向左
移动,所以步长应该是负数。
5,判断当前值是否已经到达了目标值。
如果已经到达,则停止定时器。
如果没有到达,则更新其属性,即属性等于当前值加上步长;
//=====================================
透明度运动(淡入淡出运动);
原理:持续的改变透明度属性即可。
淡入:即逐渐显示,100表示完全显示。
淡出:即逐渐隐藏,0表示完全透明。
注意:因为opacity属性可接受的值为0-1;而小数不好处理,所以
要看成是0-100;最后更新时,除以100就可以了。
代码逻辑几乎和上文缓冲运动一样,只是有几处改动:
1,上文第2步,获取当前值后,应乘以100,然后用Math.round取整
乘以100是因为我们把目标值看成了0-100,而属性原始值是0-1
用四舍五入取整是因为如果是目标值设置14这种,会导致走不到目标值
0.14*100=14.000000000000002
2,上文第5步,如果没有到达目标值,应设置属性等于当前值加上步长
opacity属性要记得除以100
如果要做低版本IE兼容,写style.filter='alpha(opacity='+(当前值+步长)+')';

posted @ 2018-04-16 23:17  悔创阿里-杰克马  阅读(104)  评论(0编辑  收藏  举报
求投食~(点图即可)