目录
一、动画实现基本原理
通过定时器 setInterval() 不断移动盒子的位置来实现动画
实现步骤:
1、获得盒子的当前位置
2、让盒子在当前位置上加上1个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时器的操作
5、此元素需要添加定位,此案能使用element.style.left
二、动画函数的简单封装
简单动画函数封装,obj目标对象,target是目标位置
给不同的元素指定了不同的定时器,通过obj.timer来实现
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)
}
animate(div, 300);
三、缓动效果实现原理
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
思路:
1、让盒子每次移动的距离慢慢变小,速度就会慢慢降下来
2、核心算法:(目标值 - 现在的位置)/ 10 作为每次移动的距离
3、停止的条件是,让当前盒子的位置等于目标位置就停止定时器
var span = document.querySelector('span');
var btn = document.querySelector('button');
// 简单动画函数封装,obj目标对象,target是目标位置
// 给不同的元素指定了不同的定时器,通过obj.timer来实现
function animate(obj, target, callback) {
// console(callback); 相当于执行了callback = function(){} 调用的时候使用callback()
// 当我们不断点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器
// 解决办法:让我们的元素只有一个定时器,在每次调用函数后先清除之前的定时器
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把步长值修改为整数, 正值就往上取整 使用 Math.ceil,往回走是负值取整,使用Math.floor()
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.left = obj.offsetLeft + step + 'px';
}, 15)
}
btn.addEventListener('click', function() {
animate(span, 800,function(){
span.style.backgroundColor = 'red';
});
})
四、缓动动画函数添加回调函数
回调函数原理:函数可以作为一个参数,把这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程叫做回调,具体请看上方代码
五、页面滚动
使用 window.scroll(x,y) x和y 不需要添加单位