javascript 45種緩動效果非常酷

2019-11-20 23:46:47

字體：大中小

來源：轉載

供稿：網友

參數	類型	說明
el	element	必需，為頁面元素
begin	number	必需，開始的位置
change	number	必需，要移動的距離
duration	number	可選，緩動效果持續時間，默認是500ms。建議取300~1000ms。
field	string	必需，要發生變化的樣式屬性。請在top，left，bottom,right，width與height中選擇。
ftp	number	可選，每秒進行多少幀動畫，默認50幀，保證流暢播放。一些參考資料，日本動畫1秒36幀，中國卡通24幀，賽車游戲60幀。
ease	function	必需，緩動公式，參數為0~1之間的數。可參考我下面給出的45條公式。
onStart	function	可選，在開始時執行。
onEnd	function	可選，在結束時執行。

prototype流派的緩動公式，只需一個參數（增至45種）

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> .taxiway{ width:800px; height:100px; background:#E8E8FF; } .move{ width:100px; height:100px; background:#a9ea00; } #panel { float:left; width:810px } #panel div{ float:left; width:88px; border:1px solid #333; height:20px; font-size:11px; } div.transition { margin-top: 30px; width: 200px; height: 200px; position: relative; margin-bottom:10px; } div.transition div { position: absolute; height: 1px; width: 1px; background: #000; } div.transition span { display: block; position: absolute; border-bottom: 1px solid #dadada; font-size: 10px; color: #888; width: 200px; left: 0px; } div.transition div#indicator { position:absolute; background-color:#a9ea00; height: 200px; top: 0px; left: 0px; } div.transition div#marker { background-color: #f00; height: 6px; width: 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; left: 0px; margin-bottom: -3px; margin-left: -3px; } div.transition div#label { background: transparent; color: #ABD474; font-size: 20px; height: 20px; width: 200px; text-align: center; top: 80px; left: 0px; z-index: -1; } </style> <script type="text/javascript"> var getCoords = function(el){ var box = el.getBoundingClientRect(), doc = el.ownerDocument, body = doc.body, html = doc.documentElement, clientTop = html.clientTop || body.clientTop || 0, clientLeft = html.clientLeft || body.clientLeft || 0, top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop, left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft return { 'top': top, 'left': left }; }; var getStyle = function(el, style){ if(!+"/v1"){ style = style.replace(//-(/w)/g, function(all, letter){ return letter.toUpperCase(); }); var value = el.currentStyle[style]; (value == "auto")&&(value = "0px" ); return value; }else{ return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) } } var tween = { easeInQuad: function(pos){ return Math.pow(pos, 2); }, easeOutQuad: function(pos){ return -(Math.pow((pos-1), 2) -1); }, easeInOutQuad: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2); return -0.5 * ((pos-=2)*pos - 2); }, easeInCubic: function(pos){ return Math.pow(pos, 3); }, easeOutCubic: function(pos){ return (Math.pow((pos-1), 3) +1); }, easeInOutCubic: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3); return 0.5 * (Math.pow((pos-2),3) + 2); }, easeInQuart: function(pos){ return Math.pow(pos, 4); }, easeOutQuart: function(pos){ return -(Math.pow((pos-1), 4) -1) }, easeInOutQuart: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); }, easeInQuint: function(pos){ return Math.pow(pos, 5); }, easeOutQuint: function(pos){ return (Math.pow((pos-1), 5) +1); }, easeInOutQuint: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5); return 0.5 * (Math.pow((pos-2),5) + 2); }, easeInSine: function(pos){ return -Math.cos(pos * (Math.PI/2)) + 1; }, easeOutSine: function(pos){ return Math.sin(pos * (Math.PI/2)); }, easeInOutSine: function(pos){ return (-.5 * (Math.cos(Math.PI*pos) -1)); }, easeInExpo: function(pos){ return (pos==0) ? 0 : Math.pow(2, 10 * (pos - 1)); }, easeOutExpo: function(pos){ return (pos==1) ? 1 : -Math.pow(2, -10 * pos) + 1; }, easeInOutExpo: function(pos){ if(pos==0) return 0; if(pos==1) return 1; if((pos/=0.5) < 1) return 0.5 * Math.pow(2,10 * (pos-1)); return 0.5 * (-Math.pow(2, -10 * --pos) + 2); }, easeInCirc: function(pos){ return -(Math.sqrt(1 - (pos*pos)) - 1); }, easeOutCirc: function(pos){ return Math.sqrt(1 - Math.pow((pos-1), 2)) }, easeInOutCirc: function(pos){ if((pos/=0.5) < 1) return -0.5 * (Math.sqrt(1 - pos*pos) - 1); return 0.5 * (Math.sqrt(1 - (pos-=2)*pos) + 1); }, easeOutBounce: function(pos){ if ((pos) < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, easeInBack: function(pos){ var s = 1.70158; return (pos)*pos*((s+1)*pos - s); }, easeOutBack: function(pos){ var s = 1.70158; return (pos=pos-1)*pos*((s+1)*pos + s) + 1; }, easeInOutBack: function(pos){ var s = 1.70158; if((pos/=0.5) < 1) return 0.5*(pos*pos*(((s*=(1.525))+1)*pos -s)); return 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos +s) +2); }, elastic: function(pos) { return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1; }, swingFromTo: function(pos) { var s = 1.70158; return ((pos/=0.5) < 1) ? 0.5*(pos*pos*(((s*=(1.525))+1)*pos - s)) : 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos + s) + 2); }, swingFrom: function(pos) { var s = 1.70158; return pos*pos*((s+1)*pos - s); }, swingTo: function(pos) { var s = 1.70158; return (pos-=1)*pos*((s+1)*pos + s) + 1; }, bounce: function(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, bouncePast: function(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, easeFromTo: function(pos) { if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); }, easeFrom: function(pos) { return Math.pow(pos,4); }, easeTo: function(pos) { return Math.pow(pos,0.25); }, linear: function(pos) { return pos }, sinusoidal: function(pos) { return (-Math.cos(pos*Math.PI)/2) + 0.5; }, reverse: function(pos) { return 1 - pos; }, mirror: function(pos, transition) { transition = transition || tween.sinusoidal; if(pos<0.5) return transition(pos*2); else return transition(1-(pos-0.5)*2); }, flicker: function(pos) { var pos = pos + (Math.random()-0.5)/5; return tween.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos); }, wobble: function(pos) { return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; }, pulse: function(pos, pulses) { return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5; }, blink: function(pos, blinks) { return Math.round(pos*(blinks||5)) % 2; }, spring: function(pos) { return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6)); }, none: function(pos){ return 0 }, full: function(pos){ return 1 } } var _ = function(id){ return document.getElementById(id); } var transition = function(el){ el.style.position = "absolute"; var options = arguments[1] || {}, begin = options.begin,//開始位置 change = options.change,//變化量 duration = options.duration || 500,//緩動效果持續時間 field = options.field,//必須指定，基本上對top,left,width,height這個屬性進行設置 ftp = options.ftp || 50, onEnd = options.onEnd || function(){}, ease = options.ease,//要使用的緩動公式 end = begin + change,//結束位置 startTime = new Date().getTime();//開始執行的時間 (function(){ setTimeout(function(){ var newTime = new Date().getTime(),//當前幀開始的時間 timestamp = newTime - startTime,//逝去時間 delta = ease(timestamp / duration); el.style[field] = Math.ceil(begin + delta * change) + "px" if(duration <= timestamp){ el.style[field] = end + "px"; onEnd(); }else{ setTimeout(arguments.callee,1000/ftp); } },1000/ftp) })() } if (typeof Array.prototype['max'] == 'undefined') { Array.prototype.map = function(fn, thisObj) { var scope = thisObj || window; var a = []; for ( var i=0, j=this.length; i < j; ++i ) { a.push(fn.call(scope, this[i], i, this)); } return a; }; Array.prototype.max = function(){ return Math.max.apply({},this) } Array.prototype.min = function(){ return Math.min.apply({},this) } } var range = function(start,end){ var _range = [] for(var i = start,l=end-start;i<l;i++){ _range.push(i) } return _range } var draw = function(ease){ var demo = _("transition"); demo.innerHTML = "";//還原！ //***********繪制控制臺******************** var values = range(0,200).map(function(v){ return tween[ease](v/200) * 200; }), max = Math.max(200, values.max()), min = Math.min(0, values.min()); if (min==max) { min = 0; max = 200; } var factor = 200/(max-min), grid = '<span style="bottom:'+Math.round((0-min)*factor)+'px">0</span>'+ '<span style="bottom:'+Math.round((200-min)*factor)+'px">1</span>', graph = range(0,200).map(function(v){ return '<div style="left:'+v+'px;bottom:'+Math.round((values[v]-min)*factor)+'px;height:1px"></div>'; }).join('') + '<div   class="iwvjtn8m0"   id="indicator" style="display:none">' +'</div><div   class="iwvjtn8m0"   id="marker" style="display:none"></div><div   class="iwvjtn8m0"   id="label"></div>'; demo.innerHTML = grid + graph; var indicator = _("indicator"), marker = _("marker"), label = _("label"), demoTransition = function(pos){ var value = tween[ease](pos); indicator.style.display = "block"; marker.style.display = "block"; marker.style.left = Math.round(pos*200)+'px'; marker.style.bottom = Math.round((value*200-min)*factor)+'px'; label.innerHTML = Math.round(pos*200)+'px'; return value; } transition(indicator,{field:"left",begin:parseFloat(getCoords(demo).left),change:200, ease:demoTransition}) } window.onload = function(){ var panelHTML = function(){ var builder = []; var _temp = 'Back Circ Cubic Expo Quad Quart Quint Sine'.split(' '); var ease = _temp.map(function(v){ return 'easeIn'+v; }); ease = ease.concat(_temp.map(function(v){ return 'easeOut'+v; })); ease = ease.concat(_temp.map(function(v){ return 'easeInOut'+v; })); ease = ease.concat('blink bounce bouncePast easeFrom easeFromTo easeOutBounce easeTo elastic'.split(' ')); ease = ease.concat('flicker full linear mirror none pulse reverse sinusoidal spring swingTo swingFrom swingFromTo wobble'.split(' ')) for(var i =0,l=ease.length;i<l;i++){ builder.push("<div onclick='draw(this.innerHTML)'>"); builder.push(ease[i]); builder.push("</div>"); } return builder.join(''); } var panel = document.createElement("div"); panel.id = "panel" panel.innerHTML = panelHTML(); _("transition").parentNode.insertBefore(panel,_("transition").nextSibling); } </script> <title>緩動BY司徒正美</title> </head> <body> <div   id="iwvjtn8m0"   class="taxiway"> <div   id="iwvjtn8m0"   class="move" onclick="transition(this,{field:'left',begin:parseFloat(getCoords(this).left),change:700,ease:tween.bouncePast})"></div> </div> <div   id="iwvjtn8m0"   class="taxiway"> <div   id="iwvjtn8m0"   class="move" onclick="transition(this,{field:'width',begin:parseFloat(getStyle(this,'width')),change:300,ease:tween.spring})"></div> </div> <span id="iwvjtn8m0"    class="clear"></span> <h2>請點擊下表的格子</h2> <div   class="iwvjtn8m0"   id="transition" class="transition"> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript復制對象使用說明

下一篇：JQuery中對服務器控件 DropdownList, RadioButtonList, CheckboxList的操作總結