概述
首先js动画一般用于轮播图那种左右或上下移动的动画
匀速运动的动画
<!DOCTYPE html>
<html lang="en">
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 0;
}
</style>
//首先定义定时器,每隔相同的时间重新定义 ele.style.left
<script>
window.addEventListener('load', function() { //页面加载完成
var div = document.querySelector('div')
function animate(obj) { //定义动画函数
obj.timer = setInterval(function() { //定义定时器
obj.style.left = obj.offsetLeft + 10 + 'px'; //元素原来的left值上移动
}, 500)
}
animate(div)
})
</script>
</head>
<body>
<div></div>
</body
</html>
想要动画速度逐渐减小,并规定运动距离
function animate(obj,target,callback) {
//定义动画函数
clearInterval(obj.timer); //每次设置定时器前先清楚定时器,防止启用多个定时器
obj.timer = setInterval(function() {
/*定义定时器obj.timer把定时器赋值给元素对象,timer是对象的属性这样可以节省内存*/
var step=target-obj.offsetLeft>=0?Math.ceil((target-obj.offsetLeft)/10): Math.floor( (target-obj.offsetLeft)/10)
/*规定每次走的距离是(目标距离-当前left值)/10因为会出现小数导致达不到指定距离就要向上取整*/
if(obj.offsetLeft==target){
clearInterval(obj.timer)
//当运动到目标位置,取消定时器
if(callback){
callback()
//移动动画完成时调用回调函数
}
}
obj.style.left = obj.offsetLeft + step+ 'px';
//元素原来的left值上移动
}, 500)
}
})
以上js动画实现指定元素的水平移动到指定位置,首先要确保移动的元素是绝对定位的元素 可以用 ele.offsetLeft 获取他距离定位父元素/body 的left距离,并通过ele.style.left给元素新的位置 step是每次移动的距离,对于step的值应为整数,这样就可以达到指定的距离(与父元素左边框的距离),如果step为正数向上取整,step为负数向下取整
垂直运动的js动画封装
//实际案例:返回到页面顶部
function animate(obj,target,callback) { //定义动画函数
clearInterval(obj.timer); //每次设置定时器前先清楚定时器,防止启用多个定时器
obj.timer = setInterval(function() { //定义定时器 obj.timer把定时器赋值给元素对象,timer是对象的属性这样可以节省内存
var step=(target-obj.pageYOffset)/10
step=step>=0?Math.ceil(step): Math.floor(step)
//规定每次走的距离是(目标距离-当前left值)/10因为会出现小数导致达不到指定距离就要向上取整
if(obj.pageYOffset==target){
clearInterval(obj.timer) //当运动到目标位置,取消定时器
callback&& callback() //移动动画完成时调用回调函数
}
window.scroll(0,obj.pageYOffset + step)
//window.sroll(x,y)确定页面上下移动距离
}, 500)
}
})
animate(window,0)
