动画效果解析
1.动画实现原理
核心原理:通过定时器 setInterval() 不断移动盒子位置
实现步骤:
1.获得盒子当前位置
2.让盒子在当前位置加上1个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器的条件(当盒子到达指定位置,就清除定时器)
5.注意此元素需要添加定位,才能使用 element.style.left
2.动画函数封装(提高效率)
函数需要传递2个参数,动画对象 和 移动到的距离
function animate( obj, target ){ } // obj 目标对象( div,span 实现动画效果的元素) target 目标距离
animate(div,500); //函数调用
3.给不同对象添加不同的定时器(优化)
问题1:
1.如果多个元素都使用动画函数,每次都要 var 声明定时器(变量声明只要有val 就会在内存中新开辟一个空间),浪费内存资源。
2.每次调用函数,声明的定时器名都是一个,这样会有歧义。
核心原理:
JS 是一门动态语言,可以很方便的给当前对象添加属性。
function animate( obj, target ){
// var timer = setInterval(function(){},100); // 把定时器给变量,多个会导致内存增加 不建议
obj.timer = setInterval(function(){},100); // 对象本来就存在内存中,给对象添加属性
}
问题2:
当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多定时器
解决方案:
让元素只要一个定时器执行,在定时器执行之前,先清除以前的定时器,只保留当前的一个定时器执行
function animate( obj,target ){
// 执行 定时器 前,先清除以前的定时器
clearInterval( obj.timer );
obj.timer = setInterval(function(){
obj.style.left = obj.offsetLeft + 1 + 'px' ;
},100);
}
4.缓动动画实现原理
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
思路:
1.让盒子每次移动的距离慢慢变小,速度慢慢落下来
2.核心算法:步长 =(目标位置 - 现在的位置) / 10 做每次移动的距离 // 10 可以更改
3.停止的条件是:让当前盒子位置等于目标位置就停止定时器
4.注意步长值需要取整(如果是正值,则步长往大了取整 如果是负值,则步长往小了取整)
function animate( obj,target ){
clearInterval( obj.timer );
obj.timer = setInterval(function(){
var step =( target - obj.offsetLeft ) / 10; // 步长公式写在 定时器里面
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 把步长的值改为整数 不要出现小数问题
obj.style.left = obj.offsetLeft + step + 'px' ;
},30);
}
匀速动画 :盒子当前的位置 + 固定的值
缓动动画: 盒子当前的位置 + 变化的值(目标值 - 现在的位置 )/ 10
5.动画函数添加回调函数
回调函数写的位置:定时器结束的位置。
function animate( obj,target , callback ){ //callback 回调函数
obj.timer = setInterval(function(){
var step =( target - obj.offsetLeft ) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if( div.offsetLeft >= target ){
// 停止动画,本质是停止定时器
clearInterval(obj.timer);
// 动画结束后,执行回调函数
if( callback ){
callback();
}
}
obj.style.left = obj.offsetLeft + step + 'px' ;
},30);
}
animate( div , 500 , function(){
// 在定时器结束后 执行的内容
})
6.总结
可以把动画函数写到一个js文件中,以后使用时,直接调用 animate 函数就可以