动画缓动效果
缓动效果原理
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路∶
1.让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
2.核心算法∶(目标值-现在的位置)/ 10做为每次移动的距离步长
<style>
div {
/* 注意:一定要添加定位 */
position: absolute;
left: 0px;
height: 100px;
width: 100px;
background-color: skyblue;
}
span {
position: absolute;
top: 150px;
left: 0;
display: block;
height: 100px;
width: 100px;
background-color: orange;
}
</style>
<button class="btn300">让第二个盒子开始移动300</button>
<button class="btn800">让第二个盒子开始移动800</button>
<div>第一个盒子,到400时停下</div>
<span>第二个盒子,到300时停下</span>
<script>
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn300 = document.querySelector('.btn300');
var btn800 = document.querySelector('.btn800');
// 调用函数
animate(div, 400);
btn300.addEventListener('click', function() {
animate(span, 300);
})
btn800.addEventListener('click', function() {
animate(span, 800);
})
// 匀速动画 就是 盒子当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
</script>
标签:动画,obj,效果,step,缓动,var,盒子
From: https://www.cnblogs.com/chichi0002/p/16889734.html