JS的缓动动画的实现,就是通过一个公式来实现的:
begin = begin + (end - begin) * 0.2;
这个公式里面,begin就是动画开始的位置,end就是动画结束的位置,0.2就是个缓动系数,不是固定值,不超过1就行,系数越大,动画运动就越快,这个看着貌似挺高大上,其实没啥,就是控制了begin等于end的速度,它的终止条件就是beng===end,放一个实例:
<script>
window.onload = function () {
// 1. 获取广告头部的高度
var offset_top = $('aside').offsetTop;
// 2. 监听窗口的滚动
var begin = 0, end = 0, timer = null;
window.onscroll = function () {
// 2.0 清除定时器
clearInterval(timer);
// 2.1 获取滚动的高度
var scroll_top = scroll().top;
end = offset_top + scroll_top;
// 2.2 缓动动画
timer = setInterval(function () {
begin = begin + (end - begin) * 0.2;
$("aside").style.top = begin + "px";
console.log(begin, end);
// 清除定时器
if(Math.round(begin) === end){
clearInterval(timer);
}
}, 20);
}
}
</script>