利用tween算法的动画方法
来源:互联网 发布:担保交易平台源码 编辑:程序博客网 时间:2024/05/29 04:46
最近在看tween算法,封装了一个可以直接做动画的方法,调用方法类似于jQuery的animate;
$(this).iTween({"width":"200px","margin-right":"100px"},500,"BackOut",function(){ alert("OK")});
Object.prototype.iTween=function(styles,speed,easing,callback){ this.element=this; if(this[0]){ this.element=this[0]; }; if(this.element.lock){ return; }; this.element.lock=false; this.t = 0; //(当前时间) -- 当前执行到第几次 this.b=[]; //(初始值)-- 当前值 this.d=100;//(持续时间)-- 执行总次数 this.speed=speed/this.d; this.easing=easing||"QuartOut"; this.name=[]; this.value=[]; for(var key in styles){ if(typeof styles[key] == "string"){ this.name.push(key); var start=this.element.currentStyle?this.element.currentStyle[key]:document.defaultView.getComputedStyle(this.element, false)[key];//不支持transform //var start=icss(this.element,key);//支持transform的另外一个方法 this.b.push(parseInt(start)); this.value.push(parseInt(styles[key])-parseInt(start)); //(变化量) -- 当前值和目标值中间的差值 }; }; clearInterval(this.timer); this.timer=setInterval(function(){ this.element.lock=true; this.t++; if(this.t>=this.d){ clearInterval(this.timer); this.element.lock=false; callback&&callback(); return; }; for (var i=0;i<this.name.length;i++) { var val=Tween[this.easing](this.t,this.b[i],parseInt(this.value[i]),this.d); this.element.style[this.name[i]]=parseInt(val)+"px";//不支持transform //icss(this.element,this.name[i],parseInt(val));//支持transform的另外一个方法 }; }.bind(this),this.speed);};//tween算法var Tween = { Linear: function(t,b,c,d){ return c*t/d + b; }, QuadIn: function(t,b,c,d){ return c*(t/=d)*t + b; }, QuadOut: function(t,b,c,d){ return -c *(t/=d)*(t-2) + b; }, QuadInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }, CubicIn: function(t,b,c,d){ return c*(t/=d)*t*t + b; }, CubicOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t + 1) + b; }, CubicInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; }, QuartIn: function(t,b,c,d){ return c*(t/=d)*t*t*t + b; }, QuartOut: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; }, QuartInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; }, QuintIn: function(t,b,c,d){ return c*(t/=d)*t*t*t*t + b; }, QuintOut: function(t,b,c,d){ return c*((t=t/d-1)*t*t*t*t + 1) + b; }, QuintInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; }, SineIn: function(t,b,c,d){ return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, SineOut: function(t,b,c,d){ return c * Math.sin(t/d * (Math.PI/2)) + b; }, SineInOut: function(t,b,c,d){ return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; }, ExpoIn: function(t,b,c,d){ return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, ExpoOut: function(t,b,c,d){ return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, ExpoInOut: function(t,b,c,d){ if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; }, CircIn: function(t,b,c,d){ return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; }, CircOut: function(t,b,c,d){ return c * Math.sqrt(1 - (t=t/d-1)*t) + b; }, CircInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; }, ElasticIn: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, ElasticOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); }, ElasticInOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }, BackIn: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, BackOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, BackInOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, BounceIn: function(t,b,c,d){ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, BounceOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, BounceInOut: function(t,b,c,d){ if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b; else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b; }};
0 0
- 利用tween算法的动画方法
- 简单的Tween动画
- Tween动画的实现
- android的动画之Tween动画
- Android开发之Tween动画实现方法
- Tween动画
- Tween动画
- tween动画
- tween动画
- Tween 动画
- Tween动画
- Android的Tween动画的实现框架
- Android的Tween动画的实现框架
- Android的Tween动画的实现框架
- Android Animation Tween动画效果的使用
- Android Animation Tween动画效果的使用
- Android的Tween Animation动画介绍
- Android Tween动画的四种方式
- python 下载网络图片到本地
- CodeForces - 548B Mike and Fun (模拟)
- CCF 201612-4 交通规划
- Android 画一个 iPhone 样式的小时钟
- MFC-右键快捷菜单步骤
- 利用tween算法的动画方法
- 不同种类线扫光源的特性
- 黑盒测试方法(三)场景法
- Python小练习1
- online db如何做字段扩充
- 时序列数据库之InfluxDB
- 正则表达式
- 2016-NJUPT-网页设计大赛总结
- Struts2 自定义拦截器