Teewn 算法记载和运动

素颜马尾好姑娘i 2022-08-05 20:27 110阅读 0赞

easeIn：从0开始加速的缓动；  
easeOut：减速到0的缓动；  
上面有4个参数 t,b,c,d  说明如下：  
t: current time（当前时间）；  
b: beginning value（初始值）；  
c: change in value（变化量）；  
d: duration（持续时间）。  
b是开始的位置 按上面的代码就是div.style.left  
c就是路程了  
d我觉得是时间不大恰当,应该说是次数或者步长更好  就是多少次到达目标位置  
t是当前时间  我觉得也不恰当,应该是从多少次开  
如上面的例子 t=0  d=100 就是从100也是从0的时候的div的位置开始  
如果是  t=10 d=100  div就是从 t=10的时候的位置开始移动。  
因为d是次数  如果次数越多  速度越快  次数越少速度越快  所以可以做成是加速度减速的效果。

===================================================================

虽然叫做缓动公式,其实应用上肯定不仅仅是运动,大小,透明度,==都可以

===================================================================

似乎写一个包含比较多情况的例子会让代码很冗,反正搞的不灵活.应该有什么需求的时候在往上面+才对

恩 就这样了   保存原始版本.........................

<!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> <title>Tween</title> <style type="text/css"> body\{ padding:0px; margin:0px; \} </style> </head> <body> <input name="g" type="radio" value="1" οnclick="ss(1)"/>样式1 <input name="g" type="radio" value="2" οnclick="ss(2)"/>样式2 <input name="g" type="radio" value="3" οnclick="ss(3)"/>样式3 <input name="g" type="radio" value="4" οnclick="ss(4)"/>样式4 <input name="g" type="radio" value="5" οnclick="ss(5)"/>样式5<br> <input name="g" type="radio" value="6" οnclick="ss(6)"/>样式6 <input name="g" type="radio" value="7" οnclick="ss(7)"/>样式7 <input name="g" type="radio" value="9" οnclick="ss(9)"/>样式9 <input name="g" type="radio" value="8" οnclick="ss(8)"/>样式8 <input name="g" type="radio" value="10" οnclick="ss(10)"/>样式10<br> <input name="g" type="radio" value="11" οnclick="ss(11)"/>样式11 <input name="g" type="radio" value="12" οnclick="ss(12)"/>样式12 <input name="g" type="radio" value="13" οnclick="ss(13)"/>样式13 <input name="g" type="radio" value="14" οnclick="ss(14)"/>样式14 <input name="g" type="radio" value="15" οnclick="ss(15)"/>样式15<br> <input name="g" type="radio" value="16" οnclick="ss(16)"/>样式16 <input name="g" type="radio" value="17" οnclick="ss(17)"/>样式17<br> <input value="运动" type="button" οnclick="move()" />　　<input value="形变" type="button" οnclick="move1()" /><br><br><br><br> <div id='ss' style="height:20px; width:20px; background-color:\#0000FF; position:absolute; left:10px; top:180px;"></div> <div id='text' style=" position:absolute; top:450px;"></div> <script type="text/javascript"> document.all&&document.execCommand("BackgroundImageCache", false, true); function Class(properties)\{ var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\}; \_class.prototype = properties; return \_class; \}; var Sys = (function(ua)\{ var s = \{\}; s.IE = ua.match(/msie (\[/d.\]+)/)?true:false; s.Firefox = ua.match(/firefox//(\[/d.\]+)/)?true:false; s.Chrome = ua.match(/chrome//(\[/d.\]+)/)?true:false; s.IE6 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 6))?true:false; s.IE7 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 7))?true:false; s.IE8 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 8))?true:false; return s; \})(navigator.userAgent.toLowerCase()); var Tween = \{ Linear: function(t,b,c,d)\{ return c\*t/d + b; \}, Quad: \{ easeIn: function(t,b,c,d)\{ return c\*(t/=d)\*t + b; \}, easeOut: function(t,b,c,d)\{ return -c \*(t/=d)\*(t-2) + b; \}, easeInOut: function(t,b,c,d)\{ if ((t/=d/2) < 1) return c/2\*t\*t + b; return -c/2 \* ((--t)\*(t-2) - 1) + b; \} \}, Cubic: \{ easeIn: function(t,b,c,d)\{ return c\*(t/=d)\*t\*t + b; \}, easeOut: function(t,b,c,d)\{ return c\*((t=t/d-1)\*t\*t + 1) + b; \}, easeInOut: function(t,b,c,d)\{ if ((t/=d/2) < 1) return c/2\*t\*t\*t + b; return c/2\*((t-=2)\*t\*t + 2) + b; \} \}, Quart: \{ easeIn: function(t,b,c,d)\{ return c\*(t/=d)\*t\*t\*t + b; \}, easeOut: function(t,b,c,d)\{ return -c \* ((t=t/d-1)\*t\*t\*t - 1) + b; \}, easeInOut: function(t,b,c,d)\{ if ((t/=d/2) < 1) return c/2\*t\*t\*t\*t + b; return -c/2 \* ((t-=2)\*t\*t\*t - 2) + b; \} \}, Quint: \{ easeIn: function(t,b,c,d)\{ return c\*(t/=d)\*t\*t\*t\*t + b; \}, easeOut: function(t,b,c,d)\{ return c\*((t=t/d-1)\*t\*t\*t\*t + 1) + b; \}, easeInOut: 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; \} \}, Sine: \{ easeIn: function(t,b,c,d)\{ return -c \* Math.cos(t/d \* (Math.PI/2)) + c + b; \}, easeOut: function(t,b,c,d)\{ return c \* Math.sin(t/d \* (Math.PI/2)) + b; \}, easeInOut: function(t,b,c,d)\{ return -c/2 \* (Math.cos(Math.PI\*t/d) - 1) + b; \} \}, Expo: \{ easeIn: function(t,b,c,d)\{ return (t==0) ? b : c \* Math.pow(2, 10 \* (t/d - 1)) + b; \}, easeOut: function(t,b,c,d)\{ return (t==d) ? b+c : c \* (-Math.pow(2, -10 \* t/d) + 1) + b; \}, easeInOut: function(t,b,c,d)\{ if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 \* Math.pow(2, 10 \* (t - 1)) + b; return c/2 \* (-Math.pow(2, -10 \* --t) + 2) + b; \} \}, Circ: \{ easeIn: function(t,b,c,d)\{ return -c \* (Math.sqrt(1 - (t/=d)\*t) - 1) + b; \}, easeOut: function(t,b,c,d)\{ return c \* Math.sqrt(1 - (t=t/d-1)\*t) + b; \}, easeInOut: function(t,b,c,d)\{ if ((t/=d/2) < 1) return -c/2 \* (Math.sqrt(1 - t\*t) - 1) + b; return c/2 \* (Math.sqrt(1 - (t-=2)\*t) + 1) + b; \} \}, Elastic: \{ easeIn: 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; \}, easeOut: 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); \}, easeInOut: function(t,b,c,d,a,p)\{ if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d\*(.3\*1.5); if (!a || a < Math.abs(c)) \{ 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; \} \}, Back: \{ easeIn: function(t,b,c,d,s)\{ if (s == undefined) s = 1.70158; return c\*(t/=d)\*t\*((s+1)\*t - s) + b; \}, easeOut: function(t,b,c,d,s)\{ if (s == undefined) s = 1.70158; return c\*((t=t/d-1)\*t\*((s+1)\*t + s) + 1) + b; \}, easeInOut: function(t,b,c,d,s)\{ if (s == undefined) 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; \} \}, Bounce: \{ easeIn: function(t,b,c,d)\{ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; \}, easeOut: 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; \} \}, easeInOut: function(t,b,c,d)\{ if (t < d/2) return Tween.Bounce.easeIn(t\*2, 0, c, d) \* .5 + b; else return Tween.Bounce.easeOut(t\*2-d, 0, c, d) \* .5 + c\*.5 + b; \} \} \} var $ = function(id)\{return document.getElementById(id)\}; var TweenMove = \{ elm : null, //记录需要缓动的元素 t : 0, //参数 b : 0, //参数 c : 0, //参数 d : 0, //参数 endfn : function()\{\}, //记录运动结束的时候的回掉 Tween : function(t,b,c,d)\{ return c\*(t/=d)\*t\*t\*t\*t + b; \}, Start : function(o,fn) //开始运动以及执行回掉 \{ if(!o&&typeof o !="object")return; this.elm = o; fn&&fn(this); return this; \}, Move : function(fn) //运动中以及回掉 \{ if(this.elm == null)return; fn&&fn(this); if(this.t<this.d) \{this.t++;setTimeout(function()\{TweenMove.Move(fn)\},1)\} else this.End(1); return this; \}, End : function(fn) //运动结束 \{ if(typeof fn == "number") \{ this.endfn(this); this.Empty(); return; \} if(fn)this.endfn = fn; \}, Empty : function() //结束时把数据清空掉 也不知道这样好不好了 \{ this.elm = null; this.endfn =function()\{\}; this.t = this.b = this.c = this.d = 0; \} \}; function ss(n)\{ var arr =\[Tween.Linear,Tween.Quad.easeIn,Tween.Quad.easeOut,Tween.Cubic.easeIn,Tween.Cubic.easeOut,Tween.Quart.easeIn,Tween.Quart.easeOut,Tween.Quint.easeIn,Tween.Quint.easeOut,Tween.Sine.easeIn,Tween.Sine.easeOut,Tween.Expo.easeIn,Tween.Expo.easeOut,Tween.Circ.easeIn,Tween.Circ.easeOut,Tween.Back.easeIn,Tween.Back.easeOut\]; TweenMove.Tween = arr\[n-1\]; \}; function move()\{ TweenMove.Start($('ss'),function(o)\{ o.t =0; o.b =10; o.c =700; o.d =60; $('text').innerHTML = "开始了"; \}).Move(function(o)\{ var l = Math.round(o.Tween(o.t,o.b,o.c,o.d)) o.elm.style.left = l +"px"; $('text').innerHTML = "运动中<br>"+l; \}).End(function()\{ $('text').innerHTML = "运动结束"; \}) \}; function move1()\{ TweenMove.Start($('ss'),function(o)\{ o.t =0; o.b =20; o.c =210; o.d =50; $('text').innerHTML = "开始了"; \}).Move(function(o)\{ var l = Math.round(o.Tween(o.t,o.b,o.c,o.d)) o.elm.style.width = Math.max(l,0) +"px"; o.elm.style.height = Math.max(l,0) +"px"; $('text').innerHTML = "行变化中<br>width:"+l+"　height:"+l; \}).End(function()\{ $('text').innerHTML = "行变结束"; \}) \} </script> </body> </html>

上面那个是只能一个元素来运动,这个可以对个元素一起运动了...............

<!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> <title>Tween</title> <style type="text/css"> body\{ padding:0px; margin:0px; \} </style> </head> <body> ------------------------------------------------------------------------------------------------------------------------- <script type="text/javascript"> document.all&&document.execCommand("BackgroundImageCache", false, true); function Class(properties)\{ var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\}; \_class.prototype = properties; return \_class; \}; var Sys = (function(ua)\{ var s = \{\}; s.IE = ua.match(/msie (\[/d.\]+)/)?true:false; s.Firefox = ua.match(/firefox//(\[/d.\]+)/)?true:false; s.Chrome = ua.match(/chrome//(\[/d.\]+)/)?true:false; s.IE6 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 6))?true:false; s.IE7 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 7))?true:false; s.IE8 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 8))?true:false; return s; \})(navigator.userAgent.toLowerCase()); var wt = \{ elm: null, $ : function(id,p)\{ var arr = id.split(" "); this.elm = arr.length == 1?document.getElementById(id):document.getElementById(arr\[0\]).getElementsByTagName(arr\[1\]); return p?this.elm:wt; \}, $$ : function(o,v,p)\{ this.elm = v?o.getElementsByTagName(v):o; return p?this.elm:wt; \}, $G : function(i,p)\{ this.elm = this.elm\[i\]; return p?this.elm:wt; \}, $C : function(o)\{ this.elm = document.createElement(o); return wt; \}, $R : function()\{ this.elm.parentNode.removeChild(this.elm); return wt; \}, Html : function(str)\{ this.elm.innerHTML = str; return wt; \}, Attr : function(k,v,p)\{ if(typeof k == "string") \{ if(!v) \{ if(this.elm.getAttribute(k)&&this.elm.getAttribute(k)!="\[object\]") return this.elm.getAttribute(k); else return this.elm\[k\]; \} if(!Sys.IE6&&!Sys.IE7&&typeof v=="object") this.elm\[k\]=v; else this.elm.setAttribute(k,v); return wt; \} if(typeof k == "object") for(var pro in k)this.elm.setAttribute(pro,k\[pro\]); return wt; \}, appendTo : function(p)\{ p.appendChild(this.elm); return wt; \}, insertBefore : function(old)\{ old.parentNode.insertBefore(this.elm,old); return wt; \}, Css : function(k,v)\{ if(typeof k == "string") \{ if(!v)return this.CurrentStyle(this.elm)\[k\]; this.elm.style\[k\] = v ; return wt; \} if(typeof k == "object") for(var pro in k)this.elm.style\[pro\] = k\[pro\]; return wt; \}, Class : function(v)\{ this.elm.className = v; return wt; \}, getTarget : function(e)\{ return e.srcElement||e.target; \}, AddListener : function(e,fn)\{ this.elm.addEventListener?this.elm.addEventListener(e,fn,false):this.elm.attachEvent("on" + e,fn); return wt; \}, RemoveListener : function(e,fn)\{ this.elm.removeEventListener?this.elm.removeEventListener(e,fn,false):this.elm.detachEvent("on" + e,fn); return wt; \}, Bind : function(o,fn,args)\{ return function()\{ return fn.apply(o,args||\[\]); \} \}, BindAsEventListener : function(o,fn,args)\{ return function(event)\{ return fn.apply(o,\[event||window.event\].concat(args)); \} \}, Extend : function(destination, source)\{ for (var property in source) \{ destination\[property\] = source\[property\]; \} \}, Bubble : function(e)\{ Sys.IE?(e.cancelBubble=true):(e.stopPropagation()); \}, CurrentStyle : function()\{ return element.currentStyle || document.defaultView.getComputedStyle(element, null); \}, Getpos : function(el,left)\{ var val = 0; while (el !=null) \{ val += el\["offset" + (left? "Left": "Top")\]; el = el.offsetParent; \} return val; \} \}; var TweenMove = new Class(\{ options : \{ t : 0, b : 0, c : 0, d : 0, Tween : function(t,b,c,d)\{return (t==0) ? b : c \* Math.pow(2, 10 \* (t/d - 1)) + b;\}, howgo : function(o)\{o.\_obj.style.left = Math.round(o.Tween(o.t,o.b,o.c,o.d)) + "px"\}, //设置什么来执行缓动 Onstart : function()\{\}, Onmove : function()\{\}, Onend : function()\{\} \}, initialize : function(obj,options)\{ this.\_obj = obj; wt.Extend(this.options,options||\{\}); wt.Extend(this,this.options); \}, Go : function()\{ Tweencommand.Start(this).Move(this,this.howgo).End(); \} \}); var Tweencommand =\{ Start : function(o)\{ o.Onstart(); return this; \}, Move : function(o,fn)\{ fn&&fn(o); o.Onmove(); if(o.t<o.d) \{o.t++;setTimeout(function()\{Tweencommand.Move(o,fn)\},1)\} else this.End(o); return this; \}, End : function(o)\{ if(!o)return; o.Onend(); \} \}; window.onload = function()\{ new TweenMove(wt.$("ss",1),\{t:0,b:10,c:700,d:60,Onend:function()\{ this.t = 0 if(this.b == 10) \{ this.b = 710;this.c = -700;\} else \{ this.b = 10;this.c = 700;\} this.Go(); \}\}).Go(); new TweenMove(wt.$("sss",1),\{Tween: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; \}\}).Go(); new TweenMove(wt.$("ssss",1),\{Tween : function(t,b,c,d)\{ return c\*(t/=d)\*t\*t\*t\*t + b; \}\}).Go(); new TweenMove(wt.$("sssss",1),\{t:0,b:\[10,20\],c:\[700,150\],d:60,howgo:function(o)\{ o.\_obj.style.left = Math.round(o.Tween(o.t,o.b\[0\],o.c\[0\],o.d)) + "px"; o.\_obj.style.width = Math.round(o.Tween(o.t,o.b\[1\],o.c\[1\],o.d)) + "px"; o.\_obj.style.height = Math.round(o.Tween(o.t,o.b\[1\],o.c\[1\],o.d)) + "px"; \},Onend : function()\{ this.t = 0; if(this.b\[0\]==10) \{ this.b\[0\]=710;this.c\[0\]=-700; this.b\[1\]=170;this.c\[1\]=-150; \} else \{ this.b\[0\]=10;this.c\[0\]=700; this.b\[1\]=20;this.c\[1\]=150; \} this.Go(); \}\}).Go() \} </script> <div id='ss' style="height:20px; width:20px; background-color:\#990000; position:absolute; top:20px; left:10px;"></div> <div id='sss' style="height:20px; width:20px; background-color:\#0000FF; position:absolute; top:60px; left:10px;"></div> <div id='ssss' style="height:20px; width:20px; background-color: \#9900FF; position:absolute; top:100px; left:10px;"></div> <div id='sssss' style="height:20px; width:20px; background-color:\#FFFF00; position:absolute; top:300px; left:10px;"></div> </body> </html>