JS-基础动画心得

写在前面的话:这两种动画方式主要在于对其中算法的理解,理解其中的向上和向下取整很关键.还有一个我犯的毛病,写样式的时候忘记给轮播图ul定位,导致效果出不来,所以有bug时记得排除下css

常用的三种动画移动方式:

闪动,直接修改style属性值,从一个地方闪现到另一个地方,反正很丑-.-

匀速移动 (已经说的很直白了╰(￣▽￣)╭也很丑)

 1 //匀速移动动画
 2         function uniform(ele,target) {
 3             //会出现移动越来越快是因为开启了多个定时器,故每次开启定时器之前都清除掉之前的定时器
 4             clearInterval(timer);
 5             var speed = (target > ele.offsetLeft) ? 10 : -10;
 6             timer = setInterval(function() {
 7                 //增加变量,可以判断目标值和当前位置的差值正负,以此来决定步长的正负
 8                 var val = target - ele.offsetLeft;
 9                 ele.style.left = ele.offsetLeft + speed + "px";
10                 if (Math.abs(val) <= Math.abs(speed)) {
11                     ele.style.left = target + "px";
12                     clearInterval(timer);
13                 }
14             },50);
15         }

传入一个要移动的对象,每50毫秒向左匀速移动10px(当时因为一个css问题整了好久才实现的轮播图功能)在不够一个步长的时候,直接二次赋值把目标位置的值赋给对象

缓变动画(先快后慢,结束时有一个缓冲的过程,跟上边的完全不是一家人)

//缓动移动动画
        function slow(ele,target) {
            clearInterval(ele.timer);   //使用前先清除定时器
            ele.timer = setInterval(function () {
                var speed = (target - ele.offsetLeft) / 10;        //距离目标位置越近,步长越来越小
                speed = target > ele.offsetLeft ? Math.ceil(speed) : Math.floor(speed);
                ele.style.left = ele.offsetLeft + speed + "px"; //缓动动画的本质,盒子目标的位置=当前位置+步长if (Math.abs(target-ele.offsetLeft) < Math.abs(speed)) {
                    ele.style.left = target + "px";
                    clearInterval(ele.timer);
                }
            },30);
        }

(target - ele.offsetLeft) / 10这句话是缓动移动的关键,步长会因为离目标点变近而越来越小

　　　　需要注意的是,offsetLeft取值的方式是按照四舍五入的方式取值,所以在剩最后10px时,每次移动1px,可以避免出现无限循环(无限循环小数)