什么是完美运动框架
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：喜欢的话点赞关注啦 ^ _ ^）
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
