关于缓动效果

那些公式看不懂...
会用就行了...
刚刚看了下,大概第一个是时间差值(second)
第二个参数是开始位置
第三个参数是变化长度.
第四个参数是变化时间单位second<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>Tween Class Demo</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
body{
font-family:verdana;
font-size:10px;
}
.menu{
background:#ccc;
width:150px;
padding:3px;
cursor:pointer;
border:1px solid #999;
position:absolute;
left:10px;
}
#demoContain{
background:#fff;
border-style:inset;
border-width:1px;
float:left;
margin-left:180px;
margin-top:8px;
width:500px;
height:346px;
padding:4px;
background:buttonface;
} #demoContain h4{
border-bottom:1px solid #999;
font-size:1.5em;
margin-bottom:5px;
margin-top:2px;
} #traceBar {
border-style:inset;
border-width:1px;
height:50px;
padding:1px;
}

.button{
/* border-width:1px;
border-style:outset;*/
font-size:12px;
padding:4px;
border:1px double #000066;
background-color: #000066;
float:right;
cursor:pointer;
color:#000;
background-image: url(bg.png);
*background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg.png", sizingmethod=scale);
margin-top:5px;
}

#selectTransitions ul{
margin:2px;
list-style:none;
margin-bottom:10px;
padding:0px;
}

#selectTransitions li {
float:left;
width:200px;
margin:2px;
}

#demoBar{
position:relative;
left:0px;
top:0px;
width:48px;
height:48px;
border:1px solid #000;
background:#f00;
}
select{
font-family:verdana;
font-size:10px;
}
  </style>
</HEAD> <BODY>
  <div id="menuContain">

  </div>  <div id="demoContain">

<h4 id="titleText">演示区域</h4>
<div id="traceBar">
<div id="demoBar"></div>
</div>
<div id="selectTransitions"> </div> <div style="clear:left;">
<div style="padding:5px;padding-bottom:10px;border-bottom:1px solid #999;">
speed: <select id="speed" onChange="playTrans()">
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
</select>(s)

loop:<select id="loop" onChange="playTrans()">
<option value="0">no loop</option>
<option value="1">loop</option>
<option value="2">come & go</option>
</select>
</div>
<div class="button" onClick="stopTrans()" style="margin-left:5px;"><b>stop</b></div>
<div id="playButton" class="button" onClick="playTrans()"><b>play</b></div> </div>  </div>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  if(typeof QZONE=="undefined"||!QZONE){
var QZONE={};}
(function(){
var _isIE=window.ActiveXObject ? true : false;QZONE.browser={
isIE: _isIE,
isIE7: _isIE&&window.XMLHttpRequest,
isMozilla: _isIE?false:(typeof document.implementation!='undefined')&&(typeof document.implementation.createDocument!='undefined')&&(typeof HTMLDocument!='undefined'),
isFirefox: _isIE?false:(navigator.userAgent.toLowerCase().indexOf("firefox")!=-1),
isSafari: _isIE?false:(navigator.userAgent.toLowerCase().indexOf("safari")!=-1),
isOpera: _isIE?false:(navigator.userAgent.toLowerCase().indexOf("opera")!=-1)}})()
QZONE.globel={
DEFAULT_DOMAIN: "qq.com"}
QZONE.lang={
isArray:function(o){}}
QZONE.css={
getClassRegEx: function(className){
var re=QZONE.css.classNameCache[className];if(!re){
re=new RegExp('(?:^|\\s+)'+className+'(?:\\s+|$)');QZONE.css.classNameCache[className]=re;}
return re;},
convertHexColor: function(color){
color=/^#/.test(color)?color.substr(1):color;var reColor=new RegExp("\\w{2}","ig");color=color.match(reColor);if(!color||color.length<3){return[0,0,0]}
var r=parseInt(color[0],16);var g=parseInt(color[1],16);var b=parseInt(color[2],16);return[r,g,b];}}
QZONE.css.classNameCache=[];QZONE.dom={
getById: function(id){
return document.getElementById(id);},
getByName: function(n){
return document.getElementsByName(id);},
get: function(e){
if(e&&(e.tagName||e.item)){
return e;}
return QZONE.dom.getById(e);},
removeElement: function(el){
el=QZONE.dom.get(el);if(!el){return}
el.parentNode.removeChild(el);},
getParentElementsByClassName: function(el,className){
el=QZONE.dom.get(el);if(!el){return null}
var re=QZONE.css.getClassRegEx(className);while(el.offsetParent){
if(re.test(el.className)){
return el;}
el=el.offsetParent;}
return null;},
createElementIn: function(tagName,el,insertFirst,attributes){
tagName=tagName||"div";el=QZONE.dom.get(el)||document.body;var _doc=el.ownerDocument;var _e=_doc.createElement(tagName);if(attributes){
for(var k in attributes){
if(/class/.test(k)){
_e.className=attributes[k];}else if(/style/.test(k)){
_e.style.cssText=attributes[k];}else{
_e[k]=attributes[k];}}}
if(insertFirst){
el.insertBefore(e,el.firstChild);}else{
el.appendChild(_e);}
return _e;},
getStyle: function(el,property){
el=QZONE.dom.get(el);var w3cMode=document.defaultView&&document.defaultView.getComputedStyle;var value="";switch(property){
case "float":property=w3cMode?"cssFloat":"styleFloat";break;case "opacity":if(!w3cMode){
var val=100;try{
val=el.filters['DXImageTransform.Microsoft.Alpha'].opacity;}catch(e){
try{
val=el.filters('alpha').opacity;}catch(e){}}
return val / 100;}}
if(w3cMode){
var computed=document.defaultView.getComputedStyle(el,'');if(computed){value=computed[property]}
return el.style[property]||value;}else{
return(el.style[property]||el.currentStyle[property])}},
setStyle: function(el,property,value){
el=QZONE.dom.get(el);if(!el){return false;}
var w3cMode=document.defaultView&&document.defaultView.getComputedStyle;switch(property){
case "float":property=w3cMode?"cssFloat":"styleFloat";case "opacity":if(!w3cMode){
el.style.filter='alpha(opacity='+(value*100)+')';return true;}
default:
if(typeof el.style[property]=="undefined"){return false}
el.style[property]=value;return true;}},
getPosition: function(el){
var _t=0;var _l=0;var _w=el.offsetWidth;var _h=el.offsetHeight;while(el.offsetParent){
_t+=el.offsetTop;_l+=el.offsetLeft;el=el.offsetParent;}
return{"top":_t,"left":_l,"width":_w,"height":_h};},
setXY: function(el,x,y){
var _d=QZONE.dom;el=_d.get(el);_d.setStyle(el,"left",parseInt(x)+"px");_d.setStyle(el,"top",parseInt(y)+"px");},
setSize: function(el,width,height){
var _d=QZONE.dom;el=_d.get(el);_d.setStyle(el,"width",(!width||width<0)?"auto":(parseInt(width)+"px"));_d.setStyle(el,"height",(!height||height<0)?"auto":(parseInt(height)+"px"));}}
QZONE.transitions={
simple: function(time,startValue,changeValue,duration){
return changeValue*time/duration+startValue;},
backEaseIn: function(t,b,c,d){
var s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b;},
backEaseOut: function(t,b,c,d,a,p){
var s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},
backEaseInOut: function(t,b,c,d,a,p){
var s=1.70158;if((t/=d/2)<1){return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;},
bounceEaseOut: function(t,b,c,d){
if((t/=d)<(1/2.75)){
return c*(7.5625*t*t)+b;}else if(t<(2/2.75)){
return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b;}else if(t<(2.5/2.75)){
return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;}else{
return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;}},
bounceEaseIn: function(t,b,c,d){
return c-QZONE.transitions.bounceEaseOut(d-t,0,c,d)+b;},
bounceEaseInOut: function(t,b,c,d){
if(t<d/2){return QZONE.transitions.bounceEaseIn(t*2,0,c,d)*.5+b;}
else return QZONE.transitions.bounceEaseOut(t*2-d,0,c,d)*.5+c*.5+b;},
strongEaseInOut: function(t,b,c,d){
return c*(t/=d)*t*t*t*t+b;},
regularEaseIn: function(t,b,c,d){
return c*(t/=d)*t+b;},
regularEaseOut: function(t,b,c,d){
return-c*(t/=d)*(t-2)+b;},
regularEaseInOut: function(t,b,c,d){
if((t/=d/2)<1){return c/2*t*t+b;}
return-c/2*((--t)*(t-2)-1)+b;},
strongEaseIn: function(t,b,c,d){
return c*(t/=d)*t*t*t*t+b;},
strongEaseOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t+1)+b;},
strongEaseInOut: function(t,b,c,d){
if((t/=d/2)<1){return c/2*t*t*t*t*t+b;}
return c/2*((t-=2)*t*t*t*t+2)+b;},
elasticEaseIn: function(t,b,c,d,a,p){
if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(!a||a<Math.abs(c)){
a=c; var s=p/4;}
else{
var s=p/(2*Math.PI)*Math.asin(c/a);}
return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},
elasticEaseOut: function(t,b,c,d,a,p){
if(t==0)return b;  if((t/=d)==1)return b+c;  if(!p)p=d*.3;if(!a||a<Math.abs(c)){a=c; var s=p/4;}
else{var s=p/(2*Math.PI)*Math.asin(c/a);}
return(a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b);},
elasticEaseInOut: function(t,b,c,d,a,p){
if(t==0)return b;  if((t/=d/2)==2)return b+c;  if(!p)var p=d*(.3*1.5);if(!a||a<Math.abs(c)){var a=c; var s=p/4;}
else{var s=p/(2*Math.PI)*Math.asin(c/a);}
if(t<1){return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;}
return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b;}}
QZONE.tween=function(el,property,func,startValue,finishValue,duration){
this._func=func||QZONE.transitions.simple;this._obj=QZONE.dom.get(el);this.isColor=/^#/.test(startValue);this._prop=property;var reSuffix=/\d+([a-z%]+)/i.exec(startValue);this._suffix=reSuffix?reSuffix[1]:"";this._startValue=this.isColor?0:parseFloat(startValue);this._finishValue=this.isColor?100:parseFloat(finishValue);if(this.isColor){
this._startColor=QZONE.css.convertHexColor(startValue);this._finishColor=QZONE.css.convertHexColor(finishValue);}
this._duration=duration||10;this._timeCount=0;this._startTime=0;this._changeValue=this._finishValue-this._startValue;this.currentValue=0;this.isPlayed=false;this.isLoop=false;this.onMotionStart=function(){}
this.onMotionChange=function(){}
this.onMotionStop=function(){}}
QZONE.tween.prototype.start=function(loop){
this._reloadTimer();this.isPlayed=true;this._runTime();this.isLoop=loop?true:false;this.onMotionStart.apply(this);}
QZONE.tween.prototype.stop=function(){
this.isPlayed=false;}
QZONE.tween.prototype._reloadTimer=function(){
this._startTime=new Date().getTime()-this._timeCount*1000;}
QZONE.tween.prototype._playTime=function(time){
var _isEnd=false;if(time>this._duration){time=this._duration;_isEnd=true;}
var pValue=this._func(time,this._startValue,this._changeValue,this._duration);this.currentValue=/(opacity)/i.test(this._prop)?pValue:Math.round(pValue);if(this.isColor){
this.currentValue=this.getColor(this._startColor,this._finishColor,pValue);}
var _try2setCSS=QZONE.dom.setStyle(this._obj,this._prop,this.currentValue+this._suffix);if(!_try2setCSS){
this._obj[this._prop]=this.currentValue+this._suffix;}
this.onMotionChange.apply(this,[this._obj,this._prop,this.currentValue]);if(_isEnd){
this.isPlayed=false;if(this.isLoop){
this.isPlayed=true;this._reloadTimer();}
this.onMotionStop.apply(this);if(window.CollectGarbage)CollectGarbage();}}
QZONE.tween.prototype._runTime=function(){
var o=this;if(o.isPlayed){
o._playTime((new Date().getTime()-this._startTime)/1000);setTimeout(function(){o._runTime.apply(o,[])},0);}}
QZONE.tween.prototype.getPercent=function(){
return(this.currentValue-this._startValue)/ this._changeValue*100;}
QZONE.tween.prototype.swapValue=function(){
if(this.isColor){
var tempValue=this._startColor.join(",");this._startColor=this._finishColor;this._finishColor=tempValue.split(",");}else{
var tempValue=this._startValue;this._startValue=this._finishValue;this._finishValue=tempValue;this._changeValue=this._finishValue-this._startValue;}}
QZONE.tween.prototype.getColor=function(startColor,finishColor,percent){
var _sc=startColor;var _fc=finishColor;var _color=[];if(percent>100){percent=100;}
if(percent<0){percent=0;}
for(var i=0;i<3;i++){
_color[i]=Math.floor(_sc[i]*1+(percent / 100)*(_fc[i]-_sc[i])).toString(16);if(_color[i].length<2){
_color[i]="0"+_color[i];}}
return "#"+_color.join("");}
var menus = ["<b>Tween Class Test</b>","hello","qzone Web Group","god","is Tween Class","test","good","cool Menu"]; function testTween(i){
if (i==menus.length){return}
var dom = document.createElement("div");
dom.className = "menu";
dom.innerHTML = menus[i];
dom.onmouseover = function(){mOver(dom)};
dom.onmouseout = function(){mOut(dom)};
dom.id = "m_" + i;
QZONE.dom.get("menuContain").insertBefore(dom,QZONE.dom.get("menuContain").firstChild);
var p = QZONE.dom.getPosition(dom);
var tw = new QZONE.tween(dom,"top",QZONE.transitions.strongEaseOut,(p.height+3)*i + "px",(p.height+3)*(i + 1) + "px",.5);

tw.onMotionChange = function(o,p,v){
QZONE.dom.setStyle(o,"opacity",this.getPercent()/100);
} tw.onMotionStop = function(){
testTween(i+1);
tw = null;
} tw.start();
}

var twPool={};
function mOver(o){
var p = QZONE.dom.getPosition(o);
if (!o._tempLeft){o._tempLeft = p.left;}
if (twPool[o.id]){twPool[o.id].stop();twPool[o.id]=null;}
twPool[o.id] = new QZONE.tween(o,"left",QZONE.transitions.elasticEaseOut,p.left + "px",o._tempLeft + 20 + "px",.5);
twPool[o.id].start();
twPool[o.id].onMotionChange = function(o,p,v){
var per = this.getPercent();
if (per){
var _c = this.getColor(QZONE.css.convertHexColor("#000000"),QZONE.css.convertHexColor("#FF0000"),this.getPercent());
var _bc = this.getColor(QZONE.css.convertHexColor("#cccccc"),QZONE.css.convertHexColor("#FFFF00"),this.getPercent());

o.style.color = _c;
o.style.backgroundColor = _bc;
}
}
} function mOut(o){
var p = QZONE.dom.getPosition(o);
if (twPool[o.id]){twPool[o.id].stop();twPool[o.id]=null;}
twPool[o.id] = new QZONE.tween(o,"left",QZONE.transitions.strongEaseInOut,p.left + "px",o._tempLeft + "px",.5);
twPool[o.id].start();
twPool[o.id].onMotionChange = function(o,p,v){
var per = this.getPercent();
if (per){
var _c = this.getColor(QZONE.css.convertHexColor("#FF0000"),QZONE.css.convertHexColor("#000000"),this.getPercent());
var _bc = this.getColor(QZONE.css.convertHexColor("#FFFF00"),QZONE.css.convertHexColor("#cccccc"),this.getPercent()); o.style.color = _c;
o.style.backgroundColor = _bc;
}
}
}
testTween(0);
  //--> var tw = new QZONE.tween(document.body,"backgroundColor",QZONE.transitions.strongEaseOut,"#ffffff","#6600CC",4);
tw.start();

var twtest = new QZONE.tween(QZONE.dom.get("playButton"),"backgroundColor",null,"#000099","#6666FF",1);
var d=0
twtest.onMotionStop = function(){
this.swapValue();
}

//输出动画类型
var s=[];
for (k in QZONE.transitions){
s.push("<li><label for='"+k+"'><input id='"+k+"' type='radio' name='transitions' value='"+k+"' onclick='selectTrans(\""+k+"\")'/>"+k+"</label></li>");
}
QZONE.dom.get("selectTransitions").innerHTML = "<ul>" + s.join("") + "</ul>";

twtest.start(true);

//演示部分
var currentTransition = "";
var twDemo = null;
function selectTrans(tr){
currentTransition = tr;
QZONE.dom.get(currentTransition).checked = true;
playTrans();
}

function playTrans(){
var p = QZONE.dom.getPosition(QZONE.dom.get("traceBar"));
var w = parseInt(p.width) - 54;
if (twDemo) {twDemo.stop();twDemo = null;}
twDemo = new QZONE.tween(QZONE.dom.get("demoBar"),"left",QZONE.transitions[currentTransition],"0px",w + "px",parseFloat(QZONE.dom.get("speed").value));
if (parseInt(QZONE.dom.get("loop").value)==2){
twDemo.onMotionStop = function(){
this.swapValue();
}
}
twDemo.start(parseInt(QZONE.dom.get("loop").value));
}

function stopTrans(){
if (twDemo) {twDemo.stop();twDemo = null;}
}

selectTrans("simple");
  </SCRIPT>
</BODY>
</HTML>

调试易

关于缓动效果

解决方案 »