JS-基础动画心得

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

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

1. 闪动,直接修改style属性值,从一个地方闪现到另一个地方,反正很丑-.-
2. 匀速移动 (已经说的很直白了╰(￣▽￣)╭也很丑)

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

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

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

   //缓动移动动画
           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,可以避免出现无限循环(无限循环小数)