缓动动画函数封装obj目标对象 target 目标位置
思路:
1. 让盒子每次移动的距离慢慢变小, 速度就会慢慢落下来。
2. 核心算法:(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器
缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
function animate(obj,target0){
//step是变化的值
//步长取整
var step=Math.ceil((target0-obj.offsetLeft)/10);
obj.times=setInterval(function(){
if (obj.offsetLeft==target0){
//到了一定位置停止
clearInterval(obj.times);
}else{
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
obj.style.left=obj.offsetLeft+step+"px";
}
},30)
}
btn.addEventListener("click",function(){
animate(step1,300);
})
匀速动画 就是 盒子是当前的位置 + 固定的值
var times=setInterval(function(){
if (move.offsetLeft>=10){
clearInterval(times);
}else{
//固定值这里写的是1
move.style.left=move.offsetLeft+1+"px";
}
},1000);