编程语言
首页 > 编程语言> > JavaScript --------WebS APIs学习之网页特效(动画函数封装)

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文件里面,使用时引用。

 

标签:动画,定时器,封装,函数,APIs,JavaScript,WebS,步长,位置
来源: https://blog.csdn.net/weixin_41984072/article/details/104842485