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

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

 

<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) {
					clearInterval(odiv.timer);
					if (callback) {
						callback();
					}
				}
				
				odiv.style.left = odiv.offsetLeft + step + 'px';
				
			},30);			
		}
		obtn.addEventListener('click',function(){
			animate(odiv,1000,function(){
				alert('动画结束');
			})
		})

</script>

思路解析：

目标距离：target:500
第一次 （500-0） /10  =50
第二次 （500-50）/10  =45
第三次  (500-(50+45))/10 =40.5     
 第二次移动结束后div的距离是 95=50+45 也就是第三次开始移动的初始位置
 ...

 当快速点击按钮时：就等于多次调用了方法，计时器一直在叠加。速度越来越块
 解决：
     1、将计时器赋值给对象元素 odiv.timer,再执行计时器时 先停到计时器
     2、小数点问题：向右侧移动（目标值>0）时 向上取整数，让其更接近目标
                     Math.ceil(step)  比如：7.1  向上取 8
                     向左侧移动(目标值<0)时 向下取整数，同理
                     Math.floor(step)  比如：-9.9 向下取 -10
     3、将页面文档的默认的内外编剧清零时 

 增加功能：
     回调函数：动画结束后执行的动作
     触发事件后 
         调用计时器方法时：传递第三个参数 此参数是个函数；
         计时器的方法接收第三个形参，在动画结束后调用这个参数

 

 

 

 

 

我的文章都是学习过程中的总结，如果发现错误，欢迎留言指出，我及时更正。