Teewn 算法记载和运动

来源：互联网发布：360°全景图js 编辑：程序博客网时间：2024/05/18 01:09

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" onclick="ss(1)"/>样式1<input name="g" type="radio" value="2" onclick="ss(2)"/>样式2<input name="g" type="radio" value="3" onclick="ss(3)"/>样式3<input name="g" type="radio" value="4" onclick="ss(4)"/>样式4<input name="g" type="radio" value="5" onclick="ss(5)"/>样式5<br><input name="g" type="radio" value="6" onclick="ss(6)"/>样式6<input name="g" type="radio" value="7" onclick="ss(7)"/>样式7<input name="g" type="radio" value="9" onclick="ss(9)"/>样式9<input name="g" type="radio" value="8" onclick="ss(8)"/>样式8<input name="g" type="radio" value="10" onclick="ss(10)"/>样式10<br><input name="g" type="radio" value="11" onclick="ss(11)"/>样式11<input name="g" type="radio" value="12" onclick="ss(12)"/>样式12<input name="g" type="radio" value="13" onclick="ss(13)"/>样式13<input name="g" type="radio" value="14" onclick="ss(14)"/>样式14<input name="g" type="radio" value="15" onclick="ss(15)"/>样式15<br><input name="g" type="radio" value="16" onclick="ss(16)"/>样式16<input name="g" type="radio" value="17" onclick="ss(17)"/>样式17<br><input value="运动" type="button" onclick="move()" />　　<input value="形变" type="button" onclick="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)}elsethis.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);elsereturn this.elm[k];}if(!Sys.IE6&&!Sys.IE7&&typeof v=="object")this.elm[k]=v;elsethis.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)}elsethis.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 = 0if(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>