文章介绍了如何使用JavaScript的setInterval定时器来实现动画效果，通过不断改变元素位置实现平移。当元素达到特定位置时停止定时器。同时，文章还探讨了缓动效果的原理，即通过减小每次移动的距离来模拟速度减缓，直到元素停止。实现缓动效果的关键是动态调整移动步长并适时停止定时器。
动画
动画实现原理
核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用element.style.left
// 实现了一个简单的动画效果
<style>
div {
position: absolute;
left = 0;
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<body>
<div></div>
<script>
div = document.querySelector('div');
var timer = setInterval(function(){
if(div.offsetLeft >= 400){
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
} , 100);
</script>
</body>
如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自 己专门用自己的定时器）。
核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
// 用函数封装 传入对象 将定时器作为对象的一个属性
var obj.timer = setInterval(function(){
if(div.offsetLeft >= 400){
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + 'px';
} , 100);
缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
实现：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
- 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
- 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
- 注意步长值需要取整
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
