前端 —— JavaScript 基础篇缓动动画（先快后慢的动画效果）demo

最新推荐文章于 2024-04-28 22:16:36 发布

原创

最新推荐文章于 2024-04-28 22:16:36 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍了一个前端JavaScript缓动动画的实现，通过示例代码详细讲解了动画效果的逻辑，包括如何处理快速点击按钮导致的计时器叠加问题，以及针对小数点的处理策略。同时，增加了回调函数功能，以便在动画结束后执行特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天来个缓动动画的小例子，是为了方便自己日后的复制粘贴，若是能帮助到大家，拿走不谢。话不多说，直接上代码。

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 200px;
			height: 200px;
			background: yellow;
			text-align: center;
			position: relative;
			top: 0px;
			left: 0;

		}
		button{
			padding: 0 20px;
			height: 40px;
			margin-top: 40px;
		}
	</style>

<div class="box">
	动画越来越来越慢，叫缓动动画
</div>
<button>点击有动画效果</button>

js 部分：

<script type="text/javascript">
		var odiv = document.querySelector('.box');
		var obtn = document.querySelector('button');
		function animate(odiv,target,callback){
			clearInterval(odiv.timer);
			odiv.timer = setInterval(function(){
				console.log(1);
				var step = (target - odiv.offsetLeft) / 10 ;// 目标距离-现在的距离
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				if (odiv.offsetLeft === target) {
					c