The requirements are as follows:
Can start, pause (linear, non-linear tween support), continue, end
Supports parallel processing of multiple styles
It is better to run without relying on a framework
The smaller the file size, the better.
He looked for some existing plug-ins or libraries that could hardly meet or be balanced. At this requirement, I wrote a relatively simple animation component, basically meeting this requirement. Code first
Online Demo: http://demo.jb51.net/js/2012/animate/
Package and download: animate_jquery.rar
Html section:
Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<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>
</Head>
<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 resume </a>
</Div>
<Div id = "anim"> </div>
</Body> Animation part:
Copy codeThe Code is as follows: function animate (options ){
This. from = options. from; // if there is no from, calculate the from
This. to = options. to | | {};
This. onStart = options. onStart | empty; // The following are some callback functions, so the event mechanism is not used.
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 duration of the change, in ms.
Var pending = false; // whether it has been paused. If the wood has been 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;
// Obtain the initial 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 the third parameter indicates that it starts from a pause, set startTime to the current time minus the time that has elapsed from the current time, if there are only two parameters, 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 in 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. );
}
}, 16 );
}
This. start = function (){
If (pending ){
This. resume ();
}
Else {
This. onStart ();
Animate (defaultState, this. );
}
}
This. stop = function (){
ClearInterval (timer );
Var styles = this.;
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 );
}
}
Usage:Copy codeThe Code is 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, 10 * (t-1) + B;
Return c/2 * (-Math. pow (2,-10 * -- t) + 2) + B;
}
};
Var mixinJQ = {
GetStyle: function (ele, styleName ){
Return parameters (ele).css (styleName );
},
SetStyle: function (ele, styleName, styleValue ){
Vertex (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': 100, 'height': 100, 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 );
}
}
The above is a complete demo code. Some notes:
The size of the Code is small enough. There are only 100 lines in total, and the size of gzip cannot reach 1 K.
It satisfies the needs of start, pause, resume, and stop, and provides several callback functions: D.
Multiple styles can be changed together.
Using a mixin variable, the three functions need to be operated during animation execution, including getStyle, setStyle, and compute. I feel that these three functions are related to the user's choice, the first two may be related to the framework, and the third is related to the change calculation method adopted by the user. The reason why four parameters are passed in is mainly to adapt to the mainstream tween class. For details, refer to explain. The example I gave uses the tangram and jquery class libraries, which correspond to two mixin objects respectively, and can be used after simple adaptation.
Some "private" variables and functions are put in the closure. In this way, when an animate is initialized, the object is clean, but the disadvantage is that it occupies more memory and every instance maintains its own method.
Options is not available for use. from, the function will be based on the amount options. to calculate the value of the corresponding style in from. This depends largely on the method provided by mixin, which is not powerful enough. Therefore, this part still has bugs. However, 80% of the functions are enough. Although the sparrow is small, it is dirty.
