关注前端 | 前端博客
当前位置: JavaScript > 动画相关

动画相关

2018-07-26 分类:JavaScript 作者:管理员 阅读(66)

动画原理: 目标位置 = 当前位置 + 步长

缓冲动画

function bufferAnimation(el,target){
	//清除历史定时器
	clearInterval(el.timer)
	//开启定时器
	el.timer=setInterval(function(){
		//获取步长 确定移动方向(正负值) 步长应该是越来越小的,缓动的算法。
		var step = Math.ceil((target-el.offsetLeft)/10);
		//到达目标位置
		if(el.offsetLeft==target){ 
			//清除定时器
			clearInterval(el.timer); 
		}else{
			el.style.left = el.offsetLeft + step + "px";  
		}
	},30)
}

* el:绑定的dom元素
* target:目标值

匀速动画

function constantAnimation(el,target){
	//清除历史定时器
	clearInterval(el.timer)
	//匀速度值
	var speed = target>el.offsetLeft?5:-5; 
	//开启定时器
	el.timer=setInterval(function(){
		
		//到达目标位置
		if(el.offsetLeft==target){ 
			//清除定时器
			clearInterval(el.timer); 
		}else{
			el.style.left = el.offsetLeft + speed + "px";  
		}
	},30)
}

* el:绑定的dom元素
* target:目标值

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 动画相关

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线