Émile.js是一个小型的动画库,只有短短几十行代码,但是做简单的动画足够应付了。 如果有时你不想引入巨大的基础库,想试试‘小米加步枪’的作业方式,可以参考下。 这样的动画库,现在看起来可能有点简陋了,但是还是可以学到一些基本原理。以下是源码分析和一些例子:
emile.js 例子
①改变颜色
emile($('example_1'), 'background-color: rgb(0, 0, 0)', {duration: 500});
②直线运动
emile($('example_2'), 'margin-left: 200px', {duration: 500});
③定制运动算法
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); } } emile($('example_3'), 'margin-left: 200px', {duration: 1500, easing: bounce});
④同时改变颜色和直线运动
emile($('example_4'), 'margin-left: 200px; background-color: #000', {duration: 1500, easing: bounce});
⑤回调函数
emile($('example_5'), 'margin-left: 200px; background-color: #000', { duration: 1500, easing: bounce, after: function() { emile($('example_5'), 'margin-left: 0; opacity: 0.0', {duration: 1500}); }});
(function(emile, container){ 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(' '); function interpolate(source,target,pos){ return (source+(target-source)*pos).toFixed(3); } // interpolate 插入,插(话) function s(str, p, c){ return str.substr(p,c||1); } function color(source,target,pos){ //如果是颜色,调用此函数;其余的调用interpolate 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(',')+')'; } function parse(prop){ //对值进行处理 var p = parseFloat(prop), q = prop.replace(/^[\-\d\.]+/,''); return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q }; //v值 f运动函数 q单位 } function normalize(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; } container[emile] = function(el, style, opts, after){ el = typeof el == 'string' ? document.getElementById(el) : el; //运动元素 opts = opts || {}; //参数项 var 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(); //回调有2种形式,一种可以放入opts,一种可以作为第四个参数 after && setTimeout(after,1); } },10); } })('emile', this); //测试用 function $(element) { return document.getElementById(element); } 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); } }