| Parameters |
type |
Description |
| El |
Element |
Required, for page elements |
| Begin |
Number |
Required, starting position |
| Change |
Number |
Required, the distance to be moved |
| Duration |
Number |
Optional, easing effect duration, default is 500ms. Suggest to take 300~1000ms. |
| Field |
String |
Required, the style attribute to be changed. Please choose between top,left,bottom,right,width and height. |
| Ftp |
Number |
Optional, how many frames per second animation, default 50 frames to ensure smooth playback. Some references, Japanese anime 1 seconds 36 frames, Chinese cartoon 24 frames, racing games 60 frames. |
| Ease |
function |
Required, easing formula, the number of 0~1 between parameters. Refer to the 45 formulas I have given below. |
| OnStart |
function |
Optional, to be executed at the beginning. |
| OnEnd |
function |
Optional, at the end of execution. |
The easing formula for the prototype genre takes only one parameter (up to 45)
<!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "Utf-8"/> <meta http-e quiv= "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.getboundingclientrec T (), 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.pagexoff Set | | 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:f Unction (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) &L T 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, * (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 (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,//start position change = options.change,//variation Duration = Options.duration | | 500,//easing effect Duration field = options.field,//must be specified, basically set FTP for top,left,width,height this property = Options.ftp | | OnEnd = Options.onend | | function () {}, ease = options.ease,//To use the easing formula end = begin + change,//ending position starttime = new Date (). GetTime ()//Start execution time (f Unction () {settimeout (function () {var newtime = new Date (). GetTime (),//The time at which the current frame begins timestamp = newtime-starttime,//elapsed time 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.A Pply ({},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 = "";//restore! Draw Console ******************** var values = range (0,200). Map (function (v) {return tween[ease] (v/200) * 200; ), max = Math.max (Values.max ()), min = math.min (0, Values.min ()); if (min==max) {min = 0; max = 200; var factor = 200/(max-min), Grid = ' <span +math.round ((0-min) *factor) + ' px ' >0</span> ' + ' <span +math.rou nd ((200-min) *factor) + ' px ' >1</span> ', graph = range (0,200). Map (function (v) {return ' <div +v+ ' px;bottom: ' + Math.Round ((Values[v]-miN) *factor + ' px;height:1px ' ></div> '; }). Join (") + ' <div id=" indicator "> ' + ' </div><div id=" marker "></div><div 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 '. 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 '. 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 ("); The var panel = document.createelement ("div"); panel.id = "Panel" panel.innerhtml = panelhtml (); _ ("transition"). Parentnode.insertbefore (Panel,_ ("transition"). nextSibling); } </script> <title> Ease by Masaki </title> </pead> <body> <div class= "Taxiway" > <div class= "Move" onclick= "transition" (This,{field: ' Left ', Begin:parsefloat (the Getcoords (this). left), Change:700,ease: Tween.bouncepast}) "></div> </div> <div class=" taxiway "> <div class=" Move "onclick= "Transition This,{field: ' Width ', begin:parsefloat (GetStyle (this, ' width '), change:300,ease:tween.spring})" > </div> </div> <span class= "clear" ></span> <p> please click on the grid </p> <div id= in the following table Transition "class=" transition "> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
