[原创]向flash看齐——简简单单玩动画效果[更新] [复制链接]

zcfg　楼主

中级会员

帖子: 169
体力: 341
威望: 5

发表于 2008-6-14 17:28:07 |显示全部楼层

简单动画函数：
优点：几百字节的代码即可实现缓冲动画效果，跨浏览器
缺点：一次只能应用于单个css属性(width/left/margin-Top)
ie6/ie7/ff/op下均ok,safari下未测试，应该也没问题。想实现多维度的动画(如width/height同时变化)，调用两次即可。

function ani(obj,what,value,callback){ //长CSS属性必须写成"margin-Top"的形式
var tid;
var ctrVal = getStyle(obj,what)||0;
var stp = (value-ctrVal)/7;
var _what = what.replace(/-/,"");
if(Math.abs(stp)>=1){
obj.style[_what] = ctrVal + stp + "px";
tid = setTimeout(function(){
ani(obj,what,value,callback);
}
,40);
}
else{
if(Math.abs(stp)>0.2){
obj.style[_what]=ctrVal + (stp>0?1:-1) + "px";
tid=setTimeout(function(){
ani(obj,what,value,callback);
}
,40);
}
else{
obj.style[_what]=value+"px";
if((typeof callback).toLowerCase() =="function")
callback();
}
}
}

复制代码

拓展1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{margin:0;padding:0;}
html,body{width:100%;height:100%;border:1px solid green;}
div{width:10px;height:10px;overflow:hidden;margin:50px;background:url(http://gg.blueidea.com/2008/blueidea/job2.gif);}
</style>
<script type="text/javascript">
function ani(obj,what,value,callback){  //长CSS属性必须写成"margin-Top"的形式
	var tid;
	var ctrVal = getStyle(obj,what)||0;
	var stp = (value-ctrVal)/7;
	var _what = what.replace(/-/,"");
	if(Math.abs(stp)>=1){
		obj.style[_what] = ctrVal + stp + "px";
		tid = setTimeout(function(){
			ani(obj,what,value,callback);
			}
		,40);
	}
	else{
		if(Math.abs(stp)>0.2){
			obj.style[_what]=ctrVal + (stp>0?1:-1) + "px";
			tid=setTimeout(function(){
				ani(obj,what,value,callback);
				}
			,40);
		}
		else{
			obj.style[_what]=value+"px";
			if((typeof callback).toLowerCase() =="function")
				callback();
		}
	}
}

function getStyle(obj,styleName)
{
    var o = (typeof obj).toLowerCase()=='object'?obj:document.getElementById(obj);
    if(o.currentStyle){
        styleName = styleName.replace(/-/g,"");
        var y = o.currentStyle[styleName];
    }
    else if(window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(o,null).getPropertyValue(styleName);
    return parseInt(y);
}

function cb(){alert("在窗口内单击左键试试");}

提示：您可以先修改部分代码再运行

此例中，连点左键时会出现抖动现象，是因为多次执行结果作用与同一个元素上造成。为了保持函数短小，我未作此判断机制，使用时请自行做逻辑判断。

拓展2：

div.wrap{
border:1px solid #AAA;
}

a{
float:left;
display:inline;
width:20px;
height:20px;
margin:2px 2px 0 0;
color:#666;
font:400 12px/20px Verdana;
text-align:center;
text-decoration:none;
border:1px solid #666;
}

a.current{
color:red;
border:1px solid red;
}
</style>

function getStyle(obj,styleName) //获取样式 cross browsers
{
    var o = (typeof obj).toLowerCase()=='object'?obj:document.getElementById(obj);
    if(o.currentStyle){
        styleName = styleName.replace(/-/g,"");
        var y = o.currentStyle[styleName];
    }
    else if(window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(o,null).getPropertyValue(styleName);
    return parseInt(y);
}

function cb(){ // callback函数 此例无用 测试用的
alert("callback");
}

//以下就是ani函数使用的发散了 不是本帖重点 为方便记事本里敲的 代码比较乱:-P
var ancs = document.getElementsByTagName('a');

function doA(){
 var o = document.getElementById('o');
 for(var j=0;j<ancs.length;j++){
  ancs[j].className="";
 }
 k = parseInt(this.innerHTML);
 clearTimeout(aPtid);
 ani(o,'margin-Top',-150*(k-1));
 this.className="current";
 }

提示：您可以先修改部分代码再运行

复杂动画函数：
优点：调用一次即可实现多个“维度”的动画效果

function animate(obj,params,speed,callback){
this.obj = (typeof obj).toLowerCase()=='object'?obj:$(obj);
this.rate = (typeof speed).toLowerCase() =="string"?({slow:1/7,normal:1/5,fast:1/3}[speed]):0;
this.isCB = ((typeof callback).toLowerCase() =="function");
var __self = this ,
flag=[0,0,0,0] , //用以确定动画时候完成
interval = 40 ,
timerID = null ;
this.start = function(){
this.loop();
}
this.loop = function(){
var k = -1;
for(var attr in params){
k++;
if(flag[k]==1)
continue; //如果完成，跳过该属性
var crtDis = getStyle(__self.obj,attr);
var togoDis = params[attr] - crtDis;
var step = togoDis*__self.rate;
if( Math.abs(step)>=1 ){
__self.obj.style[attr] = crtDis + step + "px";
}
else{
if(Math.abs(step)>__self.rate){ //即当togoDis<1/rate px时
__self.obj.style[attr] = crtDis + (togoDis>0?1:-1)+ "px";
}
else{
__self.obj.style[attr] = params[attr] + "px";
flag[k] = 1;
if(flag.toString().indexOf("0")==-1){
if(__self.isCB)
callback.call(__self.obj);
return false; // 终止程序
} //if
} //else
} //else
} //for
timerID = setTimeout(arguments.callee,interval);
} //loop
}

复制代码

拓展：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function animate(obj,params,speed,callback){
	this.obj = (typeof obj).toLowerCase()=='object'?obj:$(obj);
	this.rate = (typeof speed).toLowerCase() =="string"?({slow:1/7,normal:1/5,fast:1/3}[speed]):0;
	this.isCB = ((typeof callback).toLowerCase() =="function");

var __self  = this ,
	flag=[0,0,0,0] , //用以确定动画时候完成
	interval = 40 ,
	timerID = null ;

this.start = function(){
		this.loop();
	}

this.loop = function(){
		var k = -1;
		for(var attr in params){
			k++;
			if(flag[k]==1)
				continue; //如果完成，跳过该属性
			var crtDis = getStyle(__self.obj,attr);
			var togoDis = params[attr] - crtDis;

}

function getStyle(obj,styleName)
{
    var o = (typeof obj).toLowerCase()=='object'?obj:$(obj);
    if(o.currentStyle){
        styleName = styleName.replace(/-/g,"");
        var y = o.currentStyle[styleName];
    }
    else if(window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(o,null).getPropertyValue(styleName);
    return parseInt(y);
}

function cb1(){this.style.borderColor="orange";}
function cb2(){this.style.borderColor="#CCC";}

提示：您可以先修改部分代码再运行

此例在IE6/IE7/op下的效果较好，FF下不流畅，大概是由于程序效率和FF的js处理效率不高的原因。

[ 本帖最后由 zcfg 于 2008-6-16 17:58 编辑 ]

		自动登录	找回密码
密码			注册

[原创]向flash看齐——简简单单玩动画效果[更新] [复制链接]

浏览过的帖子

浏览过的版块