用 clearInterval (interval) 既可结束动画播放.
很好，到这里我们已经知道一个简单动画效果是怎么样写的了.
(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 = '
';
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,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 用
},
interpolate =function(source,pos){
return (source+(target-source)*pos).toFixed(3);
},
flower = function(el,style,opts,after){
var el = document.getElementById(el),//通过id
获取元素对象
opts = opts || {},
target = normalize(style),
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el,null),//ie和w3c兼容，
获取样式
prop,
current = {},
start = +new Date,//开始时间
dur = opts.duration||200,//执行事件，默认为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");
var parse = function(prop){
var p = parseFloat(prop),u: q };
}
var p = parseFloat(prop) 意思是 : 500px => 500;
q = prop.replace(/^[\-\d\.]+/,''); 500px => px;
return isNaN(p) ? { v: q,u: q }; 意思是 如果取的是颜色值(因为带有#号)，返回{ v: q,u: ''} u 代表代为,f是一个color
函数(后面会讲到);
var s = function(str,c){ return str.substr(p,c||1); }
s
函数是用来
截取字符串，并将最后结果返回
color
函数 将颜色值，最后统一返回 "rgb(x,x,x)" 的形式
normalize
函数 返回一个json对象,对象里包含了该元素要执行的css
属性名和值
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
把一行
代码拆开，看看到底如何作用
while(i--){
//这里用了一个 =号， 先进行赋值运算，如果不存在之 if将不通过， 一举两得 : )
if(v = css[props[i]]){
rules[props[i]] = parse(v); //赋给新的对象,
}
}
interpolate
函数中 return (source+(target-source)*pos).toFixed(3);
toFixed 是为了
解决小数问题，如 0.000000001; 会变成 1e-9; 不是我们想要的结果，通过toFixed 可以
解决， toFixed (n)， 其中n代表保留小数点后几位
el.currentStyle ? el.currentStyle : getComputedStyle(el,null);
这个其实兼容多浏览器,
获取元素的一句
代码 具体参考 : JS
获取最终样式 【getStyle】
flower的 4个参数 el 目标对象,style 是最终样式,是参数选项
包括 (dur时间,easing缓懂
函数,after结束后运行的callbak),第4个after是最
后执行的callbak;
opts.easing 可以利用各种缓动算法，来改变元素的运动状态;
如
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');
这样其实就是让内部
函数自由，并且只通过这个
调用去暴露一个接口。不然外面的
函数，访问不到匿名函授中的flower;
看一下
调用的例子 : )
参考 : @L_
403_6@
原文链接：https://www.f2er.com/php/28511.html
