数值动画组件

当前版本:V1 最近更新:2013-07-24 组件作者:jacobtan

 

组件说明

只针对颜色和数值的变化
ie的透明动画filter透明以外的值(比如ie6的png滤镜)会被覆盖掉
变化的CSS属性需要在CSS文件中先设置初始值
不包含缓动效果,可以自定义效果或者在下面拷贝需要的效果函数(摘自kissy easing):

//不要忘了这个
var easing = {};
 
easing.swing = function (t) { return ( -Math.cos(t * Math.PI) / 2 ) + 0.5;}
 
easing.easeIn = function (t) { return t * t; }
 
easing.easeOut = function (t) { return ( 2 - t) * t;}
 
easing.easeBoth = function (t) { return (t *= 2) < 1 ? .5 * t * t : .5 * (1 - (--t) * (t - 2));}
 
easing.easeInStrong = function (t) { return t * t * t * t;}
 
easing.easeOutStrong = function (t) { return 1 - (--t) * t * t * t; }
 
easing.easeBothStrong = function (t) { return (t *= 2) < 1 ? .5 * t * t * t * t : .5 * (2 - (t -= 2) * t * t * t);}
 
easing.elasticIn = function (t) { var p = .3, s = p / 4; if (t === 0 || t === 1) return t; return -(Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p));}
 
easing.elasticOut = function (t) { var p = .3, s = p / 4; if (t === 0 || t === 1) return t; return Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1;}
 
easing.elasticBoth = function (t) { var p = .45, s = p / 4; if (t === 0 || (t *= 2) === 2) return t; if (t < 1) { return -.5 * (Math.pow(2, 10 * (t -= 1)) * Math.sin((t - s) * (2 * Math.PI) / p)); } return Math.pow(2, -10 * (t -= 1)) *  Math.sin((t - s) * (2 * Math.PI) / p) * .5 + 1;}
 
easing.backIn = function (t) {  if (t === 1) t -= .001; return t * t * ((1.70158 + 1) * t - 1.70158); }
 
easing.backOut = function (t) { return (t -= 1) * t * ((1.70158 + 1) * t + 1.70158) + 1;}
 
easing.backBoth = function (t) { var s = 1.70158; var m = (s *= 1.525) + 1; if ((t *= 2 ) < 1) { return .5 * (t * t * (m * t - s));  }return .5 * ((t -= 2) * t * (m * t + s) + 2);}
 
easing.bounceIn = function (t) { return 1 - easing.bounceOut(1 - t);}
 
easing.bounceOut = function (t) { var s = 7.5625, r; if (t < (1 / 2.75)) { r = s * t * t;}   else if (t < (2 / 2.75)) {   r = s * (t -= (1.5 / 2.75)) * t + .75;} else if (t < (2.5 / 2.75)) { r = s * (t -= (2.25 / 2.75)) * t + .9375;}  else {  r = s * (t -= (2.625 / 2.75)) * t + .984375;} return r;}
 
easing.bounceBoth = function (t) {  if (t < .5) { return easing.bounceIn(t * 2) * .5;} return easing.bounceOut(t * 2 - 1) * .5 + .5;}

更新日志

  • 2013/07/24 发布

JS调用

引入

http://ossweb-img.qq.com/images/js/comm/anim.min.js

简单应用:

anim(node, "left:500px;");

高级应用–设置动画时长、效果、延时、回调:

anim(node, "left:10px;color:#fc0;filter:alpha(opacity=80);opacity:0.8;", {duration: 600, easing: easing.easeInStrong, delay:300, after:cb});

DEMO演示

demo

精简版拷贝代码

(function(emile, container){
    container[emile] = function (n,p,v,dur){
        var comp = n.currentStyle ? n.currentStyle : getComputedStyle(n, null),
            vs = parseFloat(comp[p]),start = +new Date, finish = start+dur,interval,
            easing = function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; };//效果自定义,可参考本文最后的代码
            interval = setInterval(function(){
              var time = +new Date, pos = time>finish ? 1 : (time-start)/dur;
              n.style[p] = (vs+(v-vs)*easing(pos)).toFixed(3) + "px";//单位自定义
              if(time>finish) { clearInterval(interval);}
            },10);
    }
})('anim', this);

使用实例【只限于数值加单位的属性动画】

anim(el,"left",500,300);//dom节点、属性、变化后的值、动画时长

只用于不支持css3的时候

var _css3Wt = 0;
if("-webkit-transition" in document.createElement('div').style){ _css3Wt = 1;}
 
if(_css3Wt){
  el.style.left = "300px";//别忘了在css里加上相关的-webkit-transition属性
}else{
  anim(el,"left",500,300);
}