There are a lot of good packaging JS Animation library, but mostly because the function is too perfect, and as for the large number of code to the thousand lines, it is not suitable for small projects to use. Here itself encapsulates a very lightweight animation library, the main features have been implemented. It is inevitable that there are omissions, but also please give us a lot of advice.
Here's a description of the features and usage, and a little bit of attention, followed by a very simple running example.
Usage and matters needing attention:
Anim (Elemid, Cssobj, Time, Animtype, Funobj)
Parameter description:
Elemid (required) an element ID that requires an animation effect
Cssobj (required) The style at the end of the animation, object type, key-value pair form,
Where the key is directly used in the "hump" in the form of CSS properties, rather than the original CSS properties.
For example: {marginleft: ' 200px ', Top: ' 200px ', borderwidth: ' 8px '}
Time (required) animation duration (unit ms)
Animtype (optional) default to linear change, the tween type in the code contains optional other parameters
Funobj (optional) If you want this option, you need to join the start and end functions.
In the form of: {El is the element pointed to by Elemid
Start:function (EL) {el.innerhtml = ' start! ';},
Complete:function (EL) {el.innerhtml = ' completed! ';}
}
A few things to note:
1, did not do a low version of browser compatibility, support ie8+, FF, Chrome, Safari, Opera
2, attention to use can be used directly in the "hump" in the form of CSS attributes (CSS should be turned to "hump" form,
But basically all JS programmers can directly write hump form, so did not turn
3, if you need to apply the animation to the absolute positioning (position:absolute) elements,
You need to be aware of the method of setting CSS on these elements.
For example: Set top and margintop, for absolute positioning elements, you should set top instead of MarginTop,
There should not be a mix of the two, because the reference points are different, and the settings can easily create confusion.
Therefore, it is not supported to set both at the same time.
Other similar empathy (left and marginleft, right and MarginRight)
Also, setting top and bottom, left, and right are not supported.
4. The tween easing algorithm is cited, which supports many kinds of changes, such as linearity, fading and fading.
5, "Animation queue" function has not yet been implemented, this version of the initial version, the omission of the place also please correct.
<! DOCTYPE html> <ptml> <pead> <title></title> <style type= "Text/css" > #container {bord er:1px solid #000; width:500px; height:400px;} #aa {border:1px solid #000; width:100px; height:40px; Background-color: #0f0; Position:absolute; left:50px; top:50px; #bb {border:1px solid #000; width:500px; height:40px; margin-top:100px;} #cc {border:1px solid #000; width:500px; height:40px;} </style> </pead><body> <div id= "container" > <input id= "abegin" type= "button" value= "Start"/&G T <input id= "Apause" type= "button" value= "suspend"/> <input "onclick= ()" Location.reload "button" type= "Refresh page"/ > <div id= "AA" > </div> <div id= "BB" >dfdfddfsd</div> <div id= "CC" >gregreger</div& Gt </div> <script type= "Text/javascript" > (function () {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 + 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, * (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, * (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, * (t-= 1)) * Math.sin ((t * d) * (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) * (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, * (t-= 1)) * Math.sin ((t * d) * (2 * math.pi)/P)) + B; Return a * MATH.POW (2, -10 * (t-= 1)) * Math.sin ((t * d) * (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 +.) + 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 color = {sub:function (str, start, Len) {if (len) return str.substring (start, start + len); else return str.substring (start); }, Hex:function (i) {//returns the 16 in color to indicate if (I < 0) return "00"; else if (i > 255) return "FF"; else {var str = "0" + i.tostring; return str.substring (str.length-2);} },//Get Color Data getcolors:function (scolor) {Scolor = Scolor.replace ("#", ""); var r, G, B; if (Scolor.length > 3) {r = Color.sub (Scolor, 0, 2); g = Color.sub (Scolor, 2, 2); b = Color.sub (Scolor, 4, 2); else {r = color.sub (Scolor, 0, 1); g = Color.sub (Scolor, 1, 1); b = Color.sub (Scolor, 2, 1); R + = r; G + G; B + B; return [parseint (R), parseint (g,), parseint (b, 16)]; } var fn = {getelement:function (id) {return typeof id = "string"? document.getElementById (ID): ID; Objtype:function (obj) {switch (Object.prototype.toString.call (obj)) {case ' [object] ': Return ' object '; Case "[Object number]": return "number"; Case "[Object Array]": Return "array"; }, Getstyle:function (Elem, name) {//var W3style; if (Document.defaultview) {var style = Document.defaultView.getComputedStyle (elem, NULL); Name = = "BorderWidth"? Name = "borderLeftWidth": Name; Resolve standard Browser Resolution problems W3style = name in style? Style[name]: Style.getpropertyvalue (name); W3style = "Auto"? W3style = "0px": w3style; } return Elem.style[name] | | (Elem.currentstyle && (eleM.currentstyle[name] = = "Auto"? "0px": Elem.currentstyle[name]) | | W3style; }, Getoricss:function (Elem, cssobj) {//Here you can only get the style attribute var cssori = []; For (Var prop in cssobj) {if (!cssobj.hasownproperty (prop)) continue; if (prop!= "opacity") Cssori.push (parseint (Fn.getstyle, elem)); Else Cssori.push (Fn.getstyle (Elem, prop)); if (Fn.getstyle (elem, prop) = = "Transparent" | |/^#|rgb\ (/.test (Fn.getstyle, Elem))) {if (Prop (Fn.getstyle, elem) = = "Transparent") {Cssori.push ([255, 255, 255]); } if (Fn.getstyle (Elem, prop)) {Cssori.push (/^#/.test) (color. Getcolors (Fn.getstyle (Elem, prop)); } if (/.test (Fn.getstyle (Elem, prop)) {//cssori.push (Fn.getstyle (Elem, prop). replace (/^rgb\ (\)/g, "")); var regexp =/^rgb\ ([0-9]{0,3}), \s ([0-9]{0,3}), \s ([0-9]{0,3}) \)/g; var re = Fn.getstyle (Elem, prop). Replace (RegExp, "$ $"). Split (""); Cssori.push (re); Re is a string array cssori.push ([parseint (Re[0]), parseint (Re[1]), parseint (re[2])];} else if (prop = = "opacity") {Cssori.push (Fn.getstyle (Elem, prop)); else {Cssori.push (parseint (Fn.getstyle (Elem, prop))); } return Cssori; }, Getendcss:function (cssobj) {var cssend = []; For (Var prop in cssobj) {if (!cssobj.hasownproperty (prop)) continue; if (prop!= "opacity") Cssend.push (parseint (Cssobj[prop)); Else Cssend.push (* cssobj[prop]); if (prop = = "opacity") {cssend.push (* cssobj[prop]); else if (/^#/.test (Cssobj[prop])) {Cssend.push (color. Getcolors (Cssobj[prop])); else {Cssend.push (parseint (Cssobj[prop])); } return cssend; } function _anim (/*elemid, Cssobj, Time, Animtype, funobj*/) {this.init.apply (this, arguments[0)); } _anim.prototype = {init:function () {This.elem = Fn.getelement (Arguments[0]); This.cssobj = arguments[1]; This.cssori = Fn.getoricss (This.elem, arguments[1]); This.cssend = Fn.getendcss (arguments[1]); This.durtime = arguments[2]; This.animtype = "Tween.linear"; This.funobj = NULL; This.start = false; This.complete = false; This.onpause = false; This.onrestart = false; if (Arguments.length < 3) {throw new Error ("at least 3 parameters to be passed in"); else if (Arguments.length = 4) {if (Fn.objtype (arguments[3)) = = "Object") {this.funobj = arguments[3]; For (var p in this.funobj) {if (p.tostring () = = "Start") This.start = true; if (p.tostring () = = "complete") This.complete = true; } if (typeof (arguments[3]) = = "string") {This.animtype = arguments[3]; } else if (Arguments.length = 5) {this.animtype = arguments[3]; if (Fn.objtype (arguments[4]) = = "Object") {this.funobj = arguments[4]; For (var p in this.funobj) {if (p.tostring () = = "Start") This.start = true; if (p.tostring () = = "complete") This.complete = true; }} this.startanim (); }, Startanim:function () {if (This.start) this.funobj["Start"].call (this, this.elem); var that = this; var t = 0; var props = []; For (Var pro in this.cssobj) {if!this.cssobj.hasownproperty (pRO)) continue; Props.push (PRO); The var tt = new Date (). GetTime (); Clearinterval (This.timer); This.timer = setinterval (function () {if (that.onpause) {clearinterval (That.timer); Return } if (T < THAT.DURTIME/10) {t++; for (var i = 0; i < props.length; i++) {var b, C; Fn.objtype (That.cssori[i])!= "Array" && (b = that.cssori[i]); Start value Fn.objtype (That.cssend[i])!= "Array" && (c = that.cssend[i]-that.cssori[i]); variable var d = THAT.DURTIME/10; Duration if (Fn.objtype (that.cssori[i]) = = "Array" && Fn.objtype (that.cssend[i]) = = "Array") {var B1 = That.csso Ri[i][0], b2 = that.cssori[i][1], B3 = that.cssori[i][2]; var C1 = that.cssend[i][0]-that.cssori[i][0], C2 = that.cssend[i][1]-that.cssori[i][1], C3 = That.cssend[i][2]-tha T.CSSORI[I][2]; var r = Color.hex (Math.ceil (eval (that.animtype)) (T, B1, C1, D)), G = Color.hex (Math.ceil (eval (that.animtype)) (T, B2, C 2, D)), B = Color.hex (Math.ceil (eval (that.animtype)) (T, B3, C3, D)); That.elem.style[props[i]] = "#" + r + G + B; else if (props[i].tostring () = = "Opacity") {That.elem.style[props[i]] = Math.ceil ((eval (that.animtype)) (T, B, C, D))/ 100; else {That.elem.style[props[i]] = Math.ceil (eval (that.animtype)) (T, B, C, D)) + "px"; }} else {for (var i = 0; i < props.length i++) {if (Fn.objtype (that.cssori[i)) = = "Array" && fn.objty PE (that.cssend[i]) = = "Array") {var C1 = that.cssend[i][0], C2 = that.cssend[i][1], C3 = That.cssend[i][2]; var r = Color.hex (Math.ceil (eval (that.animtype)) (T, B1, C1, D)), G = Color.hex (Math.ceil (eval (that.animtype)) (T, B2, C 2, D)), B = Color.hex (Math.ceil (eval (that.animtype)) (T, B3, C3, D)); That.elem.style[props[i]] = "#" + r + G + B; else if (props[i].tostring () = = "Opacity") {That.elem.style[props[i]] = that.cssend[i]/100; else {That.elem.style[props[i]] = That.cssend[i] + "px"; } clearinterval (That.timer); if (that.complete) that.funobj["complete"].call (thaT, That.elem); Alert (new Date (). GetTime ()-TT); }, 10); Generally to give 10 milliseconds asynchronous call time, can not be 1}, Pause:function () {this.onpause = true; } Window.anim = function () {return new _anim (arguments); } })(); </script> <script type= "Text/javascript" > var bbtn = document.getElementById ("Abegin"), pbtn = Document.get Elementbyid ("Apause"); var A; Bbtn.onclick = function () {a = Anim ("AA", {left: ' 200px ', Top: ' 200px ', Width: ' 200px ', Height: ' 200px ', Backgrou Ndcolor: ' #f00 ', borderwidth: ' 8px '}, 4000, ' Tween.Bounce.easeInOut ', {start:function (el) {el.innerhtml = ' start! ' ; }, Complete:function (EL) {el.innerhtml = ' completed! ';} } ); } Pbtn.onclick = function () {a.pause (); } anim ("BB", {margintop: ' 160px ', opacity:0.1, Width: ' 200px ', Height: ' 200px ', borderwidth: ' 8px '}, Watts, ' Tween. Bounce.easein ', {start:function (el) {el.innerhtml = ' start! ';}, Complete:function (EL) {el.innerhtml = ' Completed !'; } } ); </script></body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
