Requirements are as follows:
can start, pause (linear, non-linear tween support), continue, end
Supports multiple style parallelism
It's best not to rely on a frame to run
The smaller the file size, the better.
He looked for some of the existing plug-ins or libraries, few can meet or more balanced, I wrote a relatively simple animation components, the basic content of this requirement. First up code
Online Demo: http://demo.jb51.net/js/2012/animate/
Packaged Downloads: Animate_jquery.rar
HTML section:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>animate</title>
<script type= "Text/javascript" src= "Tangram-1.5.0.core.js" ></script>
<script type= "Text/javascript" src= "Jquery.min.js" ></script>
<style>
html,body,ul,li{padding:0;margin:0;}
#anim {width:50px;height:50px;background:red;position:absolute; top:30px;left:0;}
</style>
<body>
<div>
<input type= "button" value= "Start" onclick= "An.start ()"/>
<input type= "button" value= "Pause" onclick= "an.pause ()"/>
<input type= "button" value= "Resume" onclick= "An.resume ()"/>
<input type= "button" value= "Stop" onclick= "an.stop ()"/>
<a target= "_self" id= "Demolink" href= "animate.html?demo=1"/>auto start,pasue,then
</div>
<div id= "Anim" ></div>
</body>
Animate section:
Copy Code code as follows:
function animate (options) {
This.from = options.from;//If there is no from, compute the From
this.to = Options.to | | {};
This.onstart = Options.onstart | | empty;//The following are some callback functions that do not use the event mechanism
This.onstop = Options.onstop | | Empty
This.onanimate = Options.onanimate | | Empty
This.oncontinue = Options.oncontinue | | Empty
This.onpause = Options.onpause | | Empty
var element = Options.element;
var duration = Options.duration | | 300;//The total length of the change, the unit is MS
var pending = false;//is not already paused, if the wood has started, the value is True
var timer = null;
var mixin = Options.mix;
var defaultstate = This.from | | GetState (element, this.to);//RAW data
var thiz = this;
Get the most original style
function GetState (ele, targetstyles) {
var obj = {};
var i = 0;
For (var p in targetstyles)
{
i++;
OBJ[P] = parsefloat (Mixin.getstyle (Ele, p));
}
if (i = = 0) {
return null;
}
return obj;
}
function empty () {}
function animate (from, to, elapse) {
var starttime = (new Date). GetTime () + (elapse?-elapse:0);//If there is a third argument, which is shown to start with a pause, then set StartTime as the current time minus the time that has elapsed since the interim, if only There are two parameters, then the elapsed time is 0.
Timer = setinterval (function () {
var endtime = (new Date). GetTime ();
if (Endtime-starttime < duration) {
Thiz.onanimate ();
Currentelapse = Endtime-starttime;
For (Var p. from) {
if (From.hasownproperty (p)) {
var Currentpropertystyle = Mixin.compute (Currentelapse, from[p), To[p]-from[p], duration);
Mixin.setstyle (element, p, Currentpropertystyle);
}
}
}
else{
Thiz.stop (thiz.to);
}
}, 16);
}
This.start = function () {
if (pending) {
This.resume ();
}
else{
This.onstart ();
Animate (Defaultstate, this.to);
}
}
This.stop = function () {
Clearinterval (timer);
var styles = this.to;
For (var p in styles) {
if (Styles.hasownproperty (p)) {
Mixin.setstyle (element, p, styles[p]);
}
}
This.onstop ();
}
This.pause = function () {
Clearinterval (timer);
Pending = true;
This.onpause ();
}
This.resume = function () {
Pending = false;
This.oncontinue ();
Animate (Defaultstate, this.to, currentelapse);
}
}
Use section:
Copy Code code as follows:
var mixint = {
GetStyle:baidu.dom.getStyle,
SetStyle:baidu.dom.setStyle,
Compute:function (T, B, C, D) {
return t*c/d + b;
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;
}
};
var mixinjq = {
Getstyle:function (Ele, stylename) {
return $ (ele). CSS (stylename);
},
Setstyle:function (Ele, StyleName, Stylevalue) {
$ (ele). CSS (StyleName, stylevalue);
},
Compute:function (T, B, C, D) {
return B + t*c/d;
}
};
var an = new Animate ({
Element:document.getElementById (' Anim '),
from:{' width ': +, ' height ': left:0, top:30},
TO:{LEFT:500},
Mix:mixint,
duration:2000
});
if (/demo=1/.test (Location.search)) {
var demolink = baidu.g (' Demolink ');
demolink.href= ' animate.html ';
demolink.innerhtml = ' back ';
An.start ();
settimeout (function () {
An.pause ();
Resume ();
}, 1200);
Function Resume () {
settimeout (function () {An.resume ()}, 1000);
}
}
Above is a full demo of the code. Make a few notes:
Code size is small enough, a total of only 100 lines, gzip after not even 1k.
Meet the requirements of start, pause, resume, stop, and a few callback functions are presented: D.
Multiple styles can be supported to change together.
With a mixin variable, three functions are required to perform animation operations, GetStyle, SetStyle, COMPUTE, I feel that these three really have to do with the user's choice, the first two may be related to the framework, the third and the user of the change calculation method, The reason for passing in four parameters, mainly and mainstream tween class can adapt, can refer to http://www.robertpenner.com/easing/and http://www.actionscript.org/resources/ Articles/170/1/flash-mx-2004-undocumented-tweeneasing-classes-documented/page1.html. I gave the example of Tangram and jquery two class library, corresponding to the two Mixin objects, to do a simple fit, it can be used.
Some "private" variables and functions are put in the closure, so that when initializing a animate, the object is clean, but the disadvantage is that it takes up more memory, and each instance maintains its own method.
When used, it is possible to provide no options.from, and the function will compute the value of the corresponding style from within the amount options.to, depending largely on how the Mixin provides is not strong enough, so this one is still a bug, but 80% of the functionality is sufficient. Though small, spite.
