路漫漫其修远兮：js的成长经历（八）——完美运动框架（新浪微博小案例）

最新推荐文章于 2023-07-07 17:08:52 发布

不愿意做鱼的小鲸鱼

最新推荐文章于 2023-07-07 17:08:52 发布

阅读量198

点赞数

分类专栏： javacript 文章标签： javaScript Wev前端 animate 运动框架新浪微博小案例

本文链接：https://blog.csdn.net/qq_42038623/article/details/98299622

版权

javacript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

什么是完美运动框架

animate大家都很熟悉，完美运动框架就是能将自己封装好的animate能实现想要的运动效果，可以同时改变一个对象的各种属性，并且改变之后还能够实现接着需要改变的属性，即是运动，比如一个div盒子向有运动了一段距离，还能自己运动回来回来，就像是一种链式运动，这种运动框架能解决90%网页中的运动效果。

完美运动框架的实现

封装animate的时候，传入三个参数：
1.el：获取的对象
2.properties：json（{属性：属性值，属性：属性值，，}）
3.fun：函数

json是实现同时改变el对象中多个属性的值，来实现同时运动
fun函数适用于在一次完整的运动过后，需要调用的函数，由此来实现链式运动

animate原生代码

//完美运动框架

//返回el对象css样式中的property属性值
function getStyle(el, property) {
	if (getComputedStyle) {
		return getComputedStyle(el)[property];
	} else {
		return el.currentStyle[property];
	}
}
/* 对el对象css样式中的属性值进行更改，更改的内容在properties里面，properties是一个
属性对象json，对每一个properties里的每一个对象值进行修改，并且产生由快到慢的动画
效果变化 */
function animate(el, properties,fun) {
	
	var property
	//产生动态效果的方法
	el.timeId = setInterval(function() {
		for ( property in properties) {
			var current;
			var target = properties[property];
			//分为两种参数，一种是透明度，范围是0到1的变化
			if (property == "opacity") {
				current = Math.round(getStyle(el, "opacity") * 100);
			}
			//另一种是像素的变化，如width , height 等
			else {
				current = parseInt(getStyle(el, property));
			}
			//属性的变化速度（由快到慢）
			var speed = (target - current) / 6;
			//ceil向上取整  floor向下取整
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			//重新设置el对象 css中的样式
			if (property == "opacity") {
				el.style.opacity = (current + speed) / 100;
			} else {
				el.style[property] = current + speed + "px";
			}			
		}
		
		//当运动完成之后，执行函数fun()
		if (property == "opacity") {
			if((current/100)+""===getStyle(el,property)){
				clearInterval(el.timeId);
				if(fun){
					fun();
				}
			}
			
		} else {
			if((current+"px")===getStyle(el,property)){
				clearInterval(el.timeId);
				if(fun){
					fun();
				}
			}
		}
		
		// console.log(getStyle(el,property));//字符串
		// console.log(current+""); //数字
		
	}, 20);
	

}

小案例 —— 新浪微博发布消息

这个小案例是要实现点击“发布”按钮，会将一个文本框的内容发送到信息框里，并且显示动态效果，先将信息下拉，后显示文字。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{	
				margin: 0;
				padding: 0;
			}
			.ull{				
				width: 300px;
				height: 400px;
				background-color: lightblue;
				/* 超出部分显示滚动条 */
				margin: 20px auto;
				border: 5px solid #8A2BE2;
				overflow-y:auto;
				/* 让字符换行显示 */
				word-wrap:break-word;
				
				
			}
			.ull li{
				border-bottom: 1px dashed #999;
				list-style: none;
				padding: 4px;
				padding-left: 20px;
				/* overflow: hidden; */
				opacity: 0;
			
			}
			.txt{
				margin: 20px 10px;
			}
		</style>
		<script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<textarea rows="4" cols="40" class="txt"></textarea>
		<button type="button" class="btn">发布</button>
		<ul class="ull">
			
		</ul>
		
		<script type="text/javascript">
			//获取各个元素的节点
			var Otext=document.querySelector(".txt");
			var Obtn=document.querySelector(".btn");
			var Oul=document.querySelector(".ull");
			
			// 点击发布按钮,就将文本框的内容插入到容器中
			Obtn.onclick=function(){
				var Oli=document.createElement("li");
				Oli.innerHTML=Otext.value;
				Otext.value="";
				if(Oul.children.length>0){
					Oul.insertBefore(Oli,Oul.children[0]);
				}
				else{
					Oul.appendChild(Oli);
				}
				//运动
				var iHeight=Oli.offsetHeight;
				Oli.style.height="0";
				animate(Oli,{height:iHeight},function(){
					animate(Oli,{opacity:100})
				})
			}
			
		</script>
		
	</body>
</html>

（ps：需要先将animate封装成.js文件，然后引入）

实现效果

在这里插入图片描述
（ps：喜欢的话点赞关注啦 ^ _ ^）

不愿意做鱼的小鲸鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
路漫漫其修远兮：js的成长经历（八）——完美运动框架（新浪微博小案例）

目录什么是完美运动框架完美运动框架的实现animate原生代码小案例 —— 新浪微博发布消息代码实现效果什么是完美运动框架animate大家都很熟悉，完美运动框架就是能将自己封装好的animate能实现想要的运动效果，可以同时改变一个对象的各种属性，并且改变之后还能够实现接着需要改变的属性，即是运动，比如一个div盒子向有运动了一段距离，还能自己运动回来回来，就像是一链式运动，这种运动框架能解...
复制链接

扫一扫