javascript 小型动画组件与实现代码

本文主要为广大网友提供“javascript 小型动画组件与实现代码”，希望对需要javascript 小型动画组件与实现代码网友有所帮助，学习一下!

做一个普通的动画效果,js是怎么完成的呢.看一下例子
复制代码 代码如下:
setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +''px'';
},10);

test
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
用window.setInterval 动画函数 ,每隔10毫秒 都会去执行一次动画 ;
和 set配套的是 clearInterval 函数，用来结束动画。
每隔setInterval 都会返回一个类似于线程id的值 ;
var interval =setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +''px'';
},10);
用 clearInterval (interval) 既可结束动画播放.
interval = setInterval(function(){
if(parseFloat(element.style.left)>500) clearInterval(interval)
element.style.left =parseFloat(element.style.left) +2 +''px'';
},10);
超过500px的时候，动画就会停止， element将不在移动。
test
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
但是上面的动画是比较生硬的，然后我们有另外一种时间线动画。
看例子:
var element = document.getElementById(''test1'');
var start = +new Date,dur=1000,finish = start+dur;
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 为目标动画的开始时间 ( +new Date 其实就是 new Date().getTime() )
dur 为 动画执行一共所需要的时间
finish 是目标动画结束的时间
pos = time > finish ? 1 : (time-start)/dur; //可以把pos 想象成频率 ，一个时间比
(100*pos) ，100代表距离,，如果距离为500px 就设置为 500*pos;
time>finish : 如果超过时间，就停止动画!
test
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
很好，到这里我们已经知道一个简单动画效果是怎么样写的了.
再来看一个小型的完整的动画组件是如何写的 :
复制代码 代码如下:
(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(/^