一、动画实现原理
核心原理:通过定时器不断移动盒子位置
(1)获取盒子当前位置
(2)让盒子在当前位置加上一个移动距离
(3)利用定时器不断重复这个操作
(4)加一个结束定时器的条件
(5)注意此元素需要添加定位,才能使用element.style.left
二、封装动画函数
function(obj,target){
clearInterval(timer); //先清除能保证多次点击按钮触发事件重复创建定时器
var timer = setInterval(function(){
if(obj.offsetLeft >= target){
clearInterval(timer); //如果到达指定位置就停止定时器
}
obj.style.left = obj.offsetLeft + 1 + 'px';
},30);
}
三、动画函数给不同元素记录不同定时器
如果很多的元素都要使用同一个封装的动画函数,每次都要声明一个定时器,名字重复且过多占用内存资源。所以给不同的元素使用不同的定时器。
核心原理:利用JS动态语言原理,给当前对象添加属性。
所以给以上封装的函数中的timer改为obj.timer,且不使用var声明
四、缓动动画原理
缓动动画就是让元素运动速度有所变化,比如速度慢慢的停下来
(1)让盒子每次移动的距离慢慢的变小,速度就会慢慢降下来。
(2)核心算法:Math.ceil((目标值-现在的位置)/10),作为每次移动的距离步长。其中Math.ceil是为了避免运算出现小数导致最后的元素位置出现偏差,往上一位取整。
(3)停止的条件;让当前盒子的位置等于目标位置就停止定时器
五、缓动动画多个目标值之间移动
步长为负值时候会使动画后退,但是核心算法需求在负值时候进行修改,Math.floor往下一位取整。
六、动画函数添加回调函数
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行穿进去的这个函数,这个过程就叫做回调。
函数写到定时器结束的位置。
七、动画函数封装到单独的JS文件里面
(1)单独创建一个JS文件
(2)在JS文件粘贴代码
(3)在目标文件引入该JS文件 <script scr='JS地址'></script>
网友评论