好程序员技术教程分享JavaScript运动框架

最新推荐文章于 2025-09-11 14:12:58 发布

weixin_34281477

最新推荐文章于 2025-09-11 14:12:58 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：https://yq.aliyun.com/articles/699556

本文深入讲解了JavaScript运动框架的实现原理，包括匀速与缓冲运动、多物体运动、链式与同时运动等，并提供了万能运动框架代码示例，同时对比了jQuery的animate函数。

好程序员技术教程分享JavaScript运动框架，有需要的朋友可以参考下。

JavaScript的运动，即让某元素的某些属性由一个值变到另一个值的过程。如让div的width属性由200px变到400px，opacity属性由0.3变到1.0，就是一个运动过程。

实现运动要注意以下方面：

匀速运动（改变left、right、width、height、opacity等属性）
缓冲运动（速度是变化的）
多物体运动（注意所有东西都不能共用，否则容易产生冲突，如定时器timer）
获取任意属性值（封装一个getStyle函数）
链式运动（串行）
同时运动（并行，同时改变多个属性，需要使用 json）

封装好的getStyle函数，在下面的运动框架中会用到：
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //针对IE
}
else{
return getComputedStyle(obj,false)[attr]; //针对Firefox
}
}

万能的运动框架：
function Move(obj,json,callback){
var flag=true; //标志变量，为true表示所有运动都到达目标值
clearInterval(obj.timer);
obj.timer=setInterval(function(){
flag=true;
for(var attr in json){
//获取当前值
var curr=0;
if(attr=='opacity'){
curr=Math.round(parseFloat(getStyle(obj,attr))*100); //parseFloat可解析字符串返回浮点数//round四舍五入
}
else{
curr=parseInt(getStyle(obj,attr)); //parseInt可解析字符串返回整数
}
//计算速度
var speed=(json[attr]-curr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//检测是否停止
if(curr!=json[attr]){
flag=false; //有一个属性未达目标值，就把flag变成false
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(curr+speed)+')'; //针对IE
obj.style.opacity=(curr+speed)/100; //针对Firefox和Chrome
}
else{
obj.style[attr]=curr+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(callback){
callback();
}
}
},30);
}

调用上述运动框架的实例：
var div_icon=document.getElementById('icon');
var aList=div_icon.getElementsByTagName('a');
for(var i=0;i aList[i].onmouseover=function(){
var _this=this.getElementsByTagName('i')[0];
Move(_this,{top:-70,opacity:0},function(){
_this.style.top=30+'px';
Move(_this,{top:10,opacity:100});
});
}
}

好了，以上就是用JavaScript编写的运动框架。此外，jQuery中的animate函数也可以方便实现上述功能：
$(function(){
$('#icon a').mouseenter(function(){
$(this).find('i').animate({top:"-70px",opacity:"0"}, 300,function(){ //动画速度为300ms
$(this).css({top:"30px"});
$(this).animate({top:"10px",opacity:"1"}, 200);
});
})
})