JavaScript --------WebS APIs学习之网页特效（动画函数封装）

动画函数封装

1.1 动画实现原理

        核心原理： 通过定时器setInterval （）不断移动盒子位置。

        实现步骤： 1.获得盒子当前位置

                          2.让盒子当前位置加上1个移动距离

                          3.利用定时器不断重复这个操作

                          4.加一个结束定时器的条件

                          注意：此元素需要添加定位，才能使用element.style.left 

 

1.2动画函数的封装

         注意：函数需要两个传递参数，动画对象和移动到的距离

          function animate(obj , target){ }

           //把写的函数放进去，改相关的值就好啦。obj是目标对象，target是目标位置

 

1.3 动画函数给不同元素记录不同的定时器

            原因：如果多个元素都使用同一个函数，每次var都要声明定时器 ，我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）

            核心原理：利用js是一门动态语言，可以很方便的给当前对象添加属性

 

1.4 缓动效果原理

               缓动动画就是让元素运动速度有所变化，最常见的就是让速度慢慢停下来

              思路： 1.让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

                         2.核心算法：（目标值 - 现在位置）/ 10 作为每次移动的距离步长

                         3.停止的条件是：让当前盒子位置等于目标位置就停止定时器

                         注意：步长值需要取整

1.5动画函数多个目标值之间的移动 

                  可以让动画函数从800移动到500 。当点击按钮的时候，判断步长是正值还是负值

                  1.如果是正值 ，则步长往打了取整 （天花板函数Math.ceil（））

                   2.如果是负值，则步长往小了取整（地板函数Math.floor( ) ）

1.6动画函数添加回调函数

               回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去

的这个函数，这个过程就叫做回调。

               回调函数写的位置： 定时器结束的位置

1.7动画函数封装到单独JS文件里面

              为便于使用动画函数，可单独封装到一个JS文件里面，使用时引用。