The requirements are as follows:
Can start, pause (linear and nonlinear tween support), continue, and end
Supports multiple styles in parallel
It is best to run under a framework without relying on it
The smaller the file size, the better
He looked for some existing plug-ins or libraries, and few of them could meet or be relatively balanced. Under this requirement, I wrote a relatively simple animation component, which basically met this requirement. Add the code first
Online Demo:http://demo./js/2012/animate/
Package and download:animate_jquery.rar
html part:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>animate</title>
<script type="text/javascript" src="tangram-1.5."></script>
<script type="text/javascript" src=""></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="()" />
<input type="button" value="pause" onclick="()" />
<input type="button" value="resume" onclick="()" />
<input type="button" value="stop" onclick="()" />
<a target="_self" href="?demo=1" />auto start,pasue,then resume</a>
</div>
<div ></div>
</body></html>
animate part:
function animate(options){
= ;//If there is no from, calculate from
= || {};
= || empty;//The following are some callback functions, so the event mechanism is not used.
= || empty;
= || empty;
= || empty;
= || empty;
var element = ;
var duration = || 300;//The total duration of change is ms
var pending = false;//Is it paused? If there is no beginning, the value is also true
var timer = null;
var mixin = ;
var defaultState = || getState(element, );//The original data
var thiz = this;
//Get the initial style
function getState(ele, targetStyles){
var obj = {};
var i = 0;
for (var p in targetStyles)
{
i++;
obj[p] = parseFloat((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 parameter, it is proved to be from a pause, then set startTime to the current time minus the elapsed time that has been tentatively elapsed. If there are only two parameters, then the elapsed time is 0
timer = setInterval(function(){
var endTime = (new Date).getTime();
if(endTime - startTime < duration){
();
currentElapse = endTime - startTime;
for(var p in from){
if((p)){
var currentPropertyStyle = (currentElapse, from[p], to[p]-from[p], duration);
(element, p, currentPropertyStyle);
}
}
}
else{
();
}
}, 16);
}
= function(){
if(pending){
();
}
else{
();
animate(defaultState, );
}
}
= function(){
clearInterval(timer);
var styles = ;
for(var p in styles){
if((p)){
(element, p, styles[p]);
}
}
();
}
= function(){
clearInterval(timer);
pending = true;
();
}
= function(){
pending = false;
();
animate(defaultState, , currentElapse);
}
}
Used part:
var mixinT = {
getStyle:,
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 * (2, 10 * (t - 1)) + b;
return c/2 * (-(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:('anim'),
//from:{'width':100, 'height':100, left:0, top:30},
to:{left:500},
mix:mixinT,
duration:2000
});
if(/demo=1/.test()){
var demolink = ('demolink');
= '';
= 'back';
();
setTimeout(function(){
();
resume();
}, 1200);
function resume(){
setTimeout(function(){()}, 1000);
}
}
Above is a complete demo code. A few instructions:
The code size is small enough, with a total of only 100 lines, and it is less than 1k after gzip.
It meets the needs of starting, pause, resume, and stop, and gives away several callback functions: D.
Multiple styles can be supported to change together.
A mixin variable is used, and three functions are passed in need of operations when executing animations, getStyle, setStyle, and compute. I feel that these three are indeed related to the user's choice. The first two may be related to the framework, and the third one is related to the change calculation method adopted by the user. The reason why the four parameters are passed in is mainly because they can adapt to the mainstream tween classes. You can refer to /easing/ and /resources/articles/170/1/Flash-MX-2004-Undocumented-TweenEasing-Classes-Documented/. The example I gave uses two types of libraries, tangram and jquery, which correspond to two mixin objects. Just do a simple adaptation and you can use it.
Some "private" variables and functions are placed in closures. When initializing an animate, the object is clean, but the disadvantage is that it occupies too much memory, and each instance maintains its own method.
When using it, it can be not provided. The function will calculate the corresponding style value in from based on the amount. This depends largely on whether the method provided by mixin is powerful enough, so there are still bugs in this area, but 80% of the functions can be used. Although the sparrow is small, it has all the internal organs.
Can start, pause (linear and nonlinear tween support), continue, and end
Supports multiple styles in parallel
It is best to run under a framework without relying on it
The smaller the file size, the better
He looked for some existing plug-ins or libraries, and few of them could meet or be relatively balanced. Under this requirement, I wrote a relatively simple animation component, which basically met this requirement. Add the code first
Online Demo:http://demo./js/2012/animate/
Package and download:animate_jquery.rar
html part:
Copy the codeThe code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>animate</title>
<script type="text/javascript" src="tangram-1.5."></script>
<script type="text/javascript" src=""></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="()" />
<input type="button" value="pause" onclick="()" />
<input type="button" value="resume" onclick="()" />
<input type="button" value="stop" onclick="()" />
<a target="_self" href="?demo=1" />auto start,pasue,then resume</a>
</div>
<div ></div>
</body></html>
animate part:
Copy the codeThe code is as follows:
function animate(options){
= ;//If there is no from, calculate from
= || {};
= || empty;//The following are some callback functions, so the event mechanism is not used.
= || empty;
= || empty;
= || empty;
= || empty;
var element = ;
var duration = || 300;//The total duration of change is ms
var pending = false;//Is it paused? If there is no beginning, the value is also true
var timer = null;
var mixin = ;
var defaultState = || getState(element, );//The original data
var thiz = this;
//Get the initial style
function getState(ele, targetStyles){
var obj = {};
var i = 0;
for (var p in targetStyles)
{
i++;
obj[p] = parseFloat((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 parameter, it is proved to be from a pause, then set startTime to the current time minus the elapsed time that has been tentatively elapsed. If there are only two parameters, then the elapsed time is 0
timer = setInterval(function(){
var endTime = (new Date).getTime();
if(endTime - startTime < duration){
();
currentElapse = endTime - startTime;
for(var p in from){
if((p)){
var currentPropertyStyle = (currentElapse, from[p], to[p]-from[p], duration);
(element, p, currentPropertyStyle);
}
}
}
else{
();
}
}, 16);
}
= function(){
if(pending){
();
}
else{
();
animate(defaultState, );
}
}
= function(){
clearInterval(timer);
var styles = ;
for(var p in styles){
if((p)){
(element, p, styles[p]);
}
}
();
}
= function(){
clearInterval(timer);
pending = true;
();
}
= function(){
pending = false;
();
animate(defaultState, , currentElapse);
}
}
Used part:
Copy the codeThe code is as follows:
var mixinT = {
getStyle:,
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 * (2, 10 * (t - 1)) + b;
return c/2 * (-(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:('anim'),
//from:{'width':100, 'height':100, left:0, top:30},
to:{left:500},
mix:mixinT,
duration:2000
});
if(/demo=1/.test()){
var demolink = ('demolink');
= '';
= 'back';
();
setTimeout(function(){
();
resume();
}, 1200);
function resume(){
setTimeout(function(){()}, 1000);
}
}
Above is a complete demo code. A few instructions:
The code size is small enough, with a total of only 100 lines, and it is less than 1k after gzip.
It meets the needs of starting, pause, resume, and stop, and gives away several callback functions: D.
Multiple styles can be supported to change together.
A mixin variable is used, and three functions are passed in need of operations when executing animations, getStyle, setStyle, and compute. I feel that these three are indeed related to the user's choice. The first two may be related to the framework, and the third one is related to the change calculation method adopted by the user. The reason why the four parameters are passed in is mainly because they can adapt to the mainstream tween classes. You can refer to /easing/ and /resources/articles/170/1/Flash-MX-2004-Undocumented-TweenEasing-Classes-Documented/. The example I gave uses two types of libraries, tangram and jquery, which correspond to two mixin objects. Just do a simple adaptation and you can use it.
Some "private" variables and functions are placed in closures. When initializing an animate, the object is clean, but the disadvantage is that it occupies too much memory, and each instance maintains its own method.
When using it, it can be not provided. The function will calculate the corresponding style value in from based on the amount. This depends largely on whether the method provided by mixin is powerful enough, so there are still bugs in this area, but 80% of the functions can be used. Although the sparrow is small, it has all the internal organs.