[TOC] # 4.1动画实现原理 （记得加定位 才能移动） ## //匀速动画就是盒子是当前的位置+固定的值10 ## //缓动动画就是 盒子当前的位置+变化的值(目标值-现在的位置) / 10) 核心原理:通过定时器setInterval0不断移动盒子位置。 实现步骤: 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动距离 3.利用定时器不断重复这个操作 4.加一个结束定时器的条件 5.注意此元素需要添加定位,才能使用element.style.left ~~~ <script> //动画原理 // 1.获得盒子当前位置 // 2.让盒子在当前位置加上1个移动距离 // 3.利用定时器不断重复这个操作 // 4.加一个结束定时器的条件 // 5.注意此元素需要添加定位， 才能使用element . style.left var div = document . querySelector( ' div' ); var timer = setInterval(function() { if (div.offsetLeft >= 400) { //停止动画本质是停止定时器 clearInterval(timer ); } div.style.left = div.offsetLeft + 1 + 'px'; }, 30); </script> ~~~ # 4.2动画函数简单封装 注意函数需要传递2个参数,动画对象和移动到的距离。 ~~~ //1.简单动画函数封装obj目标对象target 目标位置 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft >= target) { //2.停止动画本质是停止定时器 clearInterval(timer); } obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); } var div = document.queifySelector( 'div' ); var span = document.querySelector( ' span ' ); //3.调用函数 animate(div, 300); animate(span, 200); </script> ~~~ 优化版 ~~~ // var obj = {}; // obj.name = ' andy' ; 优化 //简单动画函数封装obj目标对象target 目标位置 //给不同的元素指定了不同的定时器 function animate(obj, target) { //当我们不断的点击按钮，这个元素的速度会越来越快， 因为开启了太多的定时器 //解决方案就是让我们元素只有一个定时器执行 //先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval (function() { if (obj.offsetLeft >= target) { //停止动画本质是停止定时器 （优化） clearInterval(obj.timer); obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); } var div = document.querySelector( 'div'); var span = document.querySelector(' span ); var btn = document.querySelector( ' button' ); //调用函数 animate(div, 300); btn.addEventListener( 'click', function() { animate(span, 200); }) ~~~ # 4.4缓动效果原理 缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来 思路: 1.让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。 2\. 核心算法: (目标值-现在的位置) / 10 做为每次移动的距离步长  3.停止的条件是:让当前盒子位置等于目标位置就停止定时器 4．注意步长值需要取整 ~~~ <button class= ”btn500" >按钮陈某某500< /button> <button class=" btn800" >按钮陈某某800</button> <div></div> <span>陈某某< /span> <script> / var obj ={} // obj.name =”andy' ; //简单动画函数封装obj目标对象target 目标位置 //给不同的元素指定了不同的定时器 function animate(obj, target ){ //当我们不断的点击按钮，这个元素的速度会越来越快，因为开始了太对的定时器 //解决方案就是让我们元素只有一一个定时器执行 //先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj . timer); obj.timer = setInterval(function() { //步长值写到定时器的里面 //把步长值该为整数不要出现小数的问题 //var step = Math. ceil((target - obj .offsetLeft) / 20); var step=(target -obj.offsetLeft) / 20; step = step > 0 ? Math.ceil(step) : Math floor(step); if (obj.offsetLeft == target) { /停止动画本质是停止定时器 clearInterval(obj.timer); //把每次加1这个步长值改为当前的一个定时器执行 //核心算法: (目标值-现在的位置) / 10步长公式:作为每次移动的距离步长 obj .style.1eft = obj.offsetLeft + step + 'px' ; }, 15); //动画必须加定位 //动画原理函数封装obj目标对象 target 目标位置 var div = document.querySelector( 'div' ) var span = document.querySelector('span' ); var btn500 = document.querySelector(' .btn500 '); var btn800 = document.querySelector( ' .btn800'); //调用函数 animate(div, 300); // animate(span, 450); btn500.addEventListener('click', function() { animate(span, 500); }); btn800.addEventL istener('click'，function() { animate(span, 800); /匀速动画就是盒子是当前的位置+固定的值18 1/缓动动画就是盒子当前的位置+变化的值( (目标值 现在的位置) / 10) </script> ~~~ # 4.5动画函数多个目标值之间移动 可以让动画函数从800移动到500。 当我们点击按钮时候,判断步长是正值还是负值 1.如果是正值 ,则步长往大了取整 2.如果是负值 ,则步长向小了取整 ~~~ step = step > 0 ? Math.ceil(step) : Math. floor (step); ~~~ # 4.6动画函数添加回调函数 ~~~ 回调函数原理∶函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数， 这个过程就叫做回调。 回调函数写的位置:定时器结束的位置。 ~~~ # 4.7动画函数封装到单独JS文件里面 因为以后经常使用这个动画函数，可以单独封装到一个s文件里面，使用的时候引用这个s文件即可。 1.单独新建一个Js文件。 ~~~ <div class="sliderbar"> < span>+</ span> <div class="con"> 问题反馈</div> </div> <script> //1.获取元素 var sliderbar = document.querySelector( ' . sliderbar'); var con = document.querySelector( ' .con ' ); //当我们鼠标经过sliderbar 就会让con这个盒子滑动到左侧 //当我们鼠标离开sliderbar 就会让con这个盒子滑动到右侧 sliderbar . addEventL istener( ' mouseenter', function() { // animate(obj, target, callback); animate(con, -160, function() { //当我们动画执行完毕，就把+改为> sliderbar . children[0] . innerHTML = '+'; }); }) sliderbar.addEventL istener( ' mouseleave', function() { // animate(obj, target, callback) ; animate(con, 0, function() { sliderbar.children[0]. innerHTML = '←' ; }); }) </script> ~~~ ## 封装的js代码 ~~~ function animate(obj, target, callback) { // console.log( callback); callback = function() {}调用的时候 callback() //先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval (function() { //步长值写到定时器的里面 //把我们步 长值改为整数不要出现小数的问题 // var step = Math.ceil((target - obj . offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj .offsetLeft == target) { //停止动画本质是停止定时器 clearInterval(obj .timer); //回调函数写到定时器结束里面 if (callback) { //调用函数 callback(); } } //把每次加1这个步长值改为一个慢慢变小的值 步长公式: (目标值-现在的位置) / 10 obj.style.1eft = obj.offsetLeft + step + 'px' ; }, 15); } ~~~ ## 优化js