Javascript small animation components and implementation code
- 2020-03-31 20:48:38
- OfStack
Do a normal animation effect,js is how to complete. See an example
Use the window.setinterval animation function, which animates every 10 milliseconds;
The clearInterval function that comes with set is used to end the animation.
Every setInterval returns a value similar to the thread id;
Var interval = setInterval (function () {
Element. Style. Left = parseFloat (element. Style. Left) + (n) + 'px';
}, 10);
Use clearInterval (interval) to both end the animation.
The interval = setInterval (function () {
If (parseFloat (element. Style. Left) > 500) clearInterval (interval)
Element. Style. Left = parseFloat (element. Style. Left) + 2 + 'px';
}, 10);
Beyond 500px, the animation will stop and the element will no longer move.
But the animation above is a little stiff, and then we have another timeline animation.
See the examples:
Var element = document. GetElementById (" test1 ");
Var start = +new Date,dur=1000,finish = start+dur;
The interval = setInterval (function () {
Var time = +new Date,
Pos = time > Finish? 1: (time - start)/dur;
Element. Style. Left = 100 * (pos) + "px";
If (time> Finish) {
ClearInterval (interval);
}
}, 10);
Start is the start time of the target animation (+new Date().gettime ())
The total time required for the animation to execute
Finish is the time at which the target animation finishes
Pos = time > Finish? 1: (time - start)/dur; // think of pos as frequency, a time ratio
(100*pos), 100 represents the distance, if the distance is 500px, it is set to 500*pos;
Time> Finish: if time runs out, stop the animation!
Good. So far we've seen how a simple animation is written.
Let's take a look at how a small full animation component is written:
The s function is used to intercept a string and return the final result
The color function returns the color value as "RGB (x,x,x)"
The normalize function returns a json object that contains the CSS attribute name and value for the element to execute
While (I -) if (v = CSS [props [I]]) rules [props [I]] = parse (v);
Take a single line of code and see how it works
While (I -) {
// here is a = sign, the first assignment operation, if there is no if will not pass, kill two birds with one stone:
If (v = CSS [props [I]]) {
Rules [props [I]] = parse (v); // assign a new object,
}
}
Interpolate function return (source + (target - source) * (pos). ToFixed (3);
ToFixed is to solve the decimal problem, such as 0.000000001; Will become 1 e - 9; It's not what we want. We can solve it by toFixed, toFixed (n), where n is the number of decimal places left
El. CurrentStyle? El. CurrentStyle: getComputedStyle (el, null);
This is actually compatible with multiple browsers, get the element of the code specific reference: JS get the final style [getStyle]
The 4 parameters of the el target object of flower,style is the final style,opts is the parameter options including (dur time,easing function,after the end of the run of callbak), the fourth after is the last executed callbak;
Opts. Easing can use various easing algorithms to change the movement state of elements.
Such as
This essentially leaves the inner function free and exposes only one interface through this call. Otherwise the outer function cannot access the flower in the anonymous correspondence;
Take a look at the call example:)
Reference: (link: http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.html)
setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +'px';
},10);
test
Use the window.setinterval animation function, which animates every 10 milliseconds;
The clearInterval function that comes with set is used to end the animation.
Every setInterval returns a value similar to the thread id;
Var interval = setInterval (function () {
Element. Style. Left = parseFloat (element. Style. Left) + (n) + 'px';
}, 10);
Use clearInterval (interval) to both end the animation.
The interval = setInterval (function () {
If (parseFloat (element. Style. Left) > 500) clearInterval (interval)
Element. Style. Left = parseFloat (element. Style. Left) + 2 + 'px';
}, 10);
Beyond 500px, the animation will stop and the element will no longer move.
test
But the animation above is a little stiff, and then we have another timeline animation.
See the examples:
Var element = document. GetElementById (" test1 ");
Var start = +new Date,dur=1000,finish = start+dur;
The interval = setInterval (function () {
Var time = +new Date,
Pos = time > Finish? 1: (time - start)/dur;
Element. Style. Left = 100 * (pos) + "px";
If (time> Finish) {
ClearInterval (interval);
}
}, 10);
Start is the start time of the target animation (+new Date().gettime ())
The total time required for the animation to execute
Finish is the time at which the target animation finishes
Pos = time > Finish? 1: (time - start)/dur; // think of pos as frequency, a time ratio
(100*pos), 100 represents the distance, if the distance is 500px, it is set to 500*pos;
Time> Finish: if time runs out, stop the animation!
test
Good. So far we've seen how a simple animation is written.
Let's take a look at how a small full animation component is written:
(function($,name){
var parseEl = document.createElement('div')
,
props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+
'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize '+
'fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight '+
'maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft '+
'paddingRight paddingTop right textIndent top width wordSpacing zIndex').split(' ')
,
normalize =function (style){
var css,
rules = {},
i = props.length,
v;
parseEl.innerHTML = '<div style="'+style+'"></div>';
css = parseEl.childNodes[0].style;
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
return rules;
},
color = function(source,target,pos){
var i = 2, j, c, tmp, v = [], r = [];
while(j=3,c=arguments[i-1],i--)
if(s(c,0)=='r') { c = c.match(/d+/g); while(j--) v.push(~~c[j]); } else {
if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c,3)+s(c,3);
while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); }
while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp<0?0:tmp>255?255:tmp); }
return 'rgb('+r.join(',')+')';
},
parse = function(prop){
var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,'');
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q };
},
s = function(str, p, c){
return str.substr(p,c||1);//Color to use
},
interpolate =function(source,target,pos){
return (source+(target-source)*pos).toFixed(3);
},
flower = function(el, style,opts,after){
var el = document.getElementById(el), //Get the element object by id
opts = opts || {},
target = normalize(style),
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null), //Ie and w3c compatible, get style
prop,
current = {},
start = +new Date, //The start time
dur = opts.duration||200, //Execute the event, which defaults to 200
finish = start+dur, //The end of time
interval,
easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; };
for(prop in target) current[prop] = parse(comp[prop]);
interval = setInterval(function(){
var time = +new Date,
pos = time>finish ? 1 : (time-start)/dur;
for(prop in target){
el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u;
}
if(time>finish) {
clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1);
}
},10);
};
$[name] = flower;
})(window,"flower");
var parse = function(prop){
var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,'');
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q };
}
var p = parseFloat(prop) mean : 500px => 500;
q = prop.replace(/^[-d.]+/,''); 500px => px;
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q }; mean If I take the color value ( Because with # No. ) To return to { v: q, f: color, u: ''} u Representative on behalf of ,f Is a color function ( We'll talk about that later );
var s = function(str, p, c){ return str.substr(p,c||1); }
The s function is used to intercept a string and return the final result
The color function returns the color value as "RGB (x,x,x)"
The normalize function returns a json object that contains the CSS attribute name and value for the element to execute
While (I -) if (v = CSS [props [I]]) rules [props [I]] = parse (v);
Take a single line of code and see how it works
While (I -) {
// here is a = sign, the first assignment operation, if there is no if will not pass, kill two birds with one stone:
If (v = CSS [props [I]]) {
Rules [props [I]] = parse (v); // assign a new object,
}
}
Interpolate function return (source + (target - source) * (pos). ToFixed (3);
ToFixed is to solve the decimal problem, such as 0.000000001; Will become 1 e - 9; It's not what we want. We can solve it by toFixed, toFixed (n), where n is the number of decimal places left
El. CurrentStyle? El. CurrentStyle: getComputedStyle (el, null);
This is actually compatible with multiple browsers, get the element of the code specific reference: JS get the final style [getStyle]
The 4 parameters of the el target object of flower,style is the final style,opts is the parameter options including (dur time,easing function,after the end of the run of callbak), the fourth after is the last executed callbak;
Opts. Easing can use various easing algorithms to change the movement state of elements.
Such as
function bounce(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);
}
}
(function($,name){
window.flower = flower;
})(window,'flower');
This essentially leaves the inner function free and exposes only one interface through this call. Otherwise the outer function cannot access the flower in the anonymous correspondence;
Take a look at the call example:)
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>
<script>
(function($,name){
var parseEl = document.createElement('div')
,
props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+
'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize '+
'fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight '+
'maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft '+
'paddingRight paddingTop right textIndent top width wordSpacing zIndex').split(' ')
,
normalize =function (style){
var css,
rules = {},
i = props.length,
v;
parseEl.innerHTML = '<div style="'+style+'"></div>';
css = parseEl.childNodes[0].style;
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
return rules;
},
color = function(source,target,pos){
var i = 2, j, c, tmp, v = [], r = [];
while(j=3,c=arguments[i-1],i--)
if(s(c,0)=='r') { c = c.match(/d+/g); while(j--) v.push(~~c[j]); } else {
if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c,3)+s(c,3);
while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); }
while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp<0?0:tmp>255?255:tmp); }
return 'rgb('+r.join(',')+')';
},
parse = function(prop){
var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,'');
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q };
},
s = function(str, p, c){
return str.substr(p,c||1);
},
interpolate =function(source,target,pos){
return (source+(target-source)*pos).toFixed(3);
},
flower = function(el, style,opts,after){
var el = document.getElementById(el),
opts = opts || {},
target = normalize(style),
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null),
prop,
current = {},
start = +new Date,
dur = opts.duration||200,
finish = start+dur,
interval,
easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; };
for(prop in target) current[prop] = parse(comp[prop]);
interval = setInterval(function(){
var time = +new Date,
pos = time>finish ? 1 : (time-start)/dur;
for(prop in target){
el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u;
}
if(time>finish) {
clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1);
}
},10);
};
$[name] = flower;
})(window,"flower");
(function(){
var 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);
}
}
flower('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
duration: 1500,
after: function(){
flower('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
duration: 1234, easing: bounce
});
}
});
})();
</script>
Reference: (link: http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.html)