javascript动画算法实例分析
网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了javascript动画算法,实例分析了javascript实现动画效果的实现及使用技巧,需要的朋友可以参考下
本文实例讲述了javascript动画算法。分享给大家供大家参考。具体如下
动画算法
Linear无缓动效果(匀速运动);
Quadratic二次方的缓动;
Cubic三次方的缓动
Quartic四次方的缓动;
Quintic五次方的缓动;
Sinusoidal正弦曲线的缓动;
Exponential指数曲线的缓动;
Circular圆形曲线的缓动;
Elastic指数衰减的正弦曲线缓动;
Back超过范围的三次方缓动);
Bounce指数衰减的反弹缓动。
每个效果都分三个缓动方式(方法),分别是
easeIn从0开始加速的运动;
easeOut减速到0的运动;
easeInOut前半段从0开始加速,后半段减速到0的运动。
函数的四个参数分别代表
t--- current time(当前时间);
b--- beginning value(初始值);
c--- change in value(变化量);
d---duration(持续时间)
运算的结果就是当前的运动路程。
Tween.js如下
Tween = { Linear: function(t,b,c,d){ return ct/d + b; }, Quad: { easeIn: function(t,b,c,d){ return c(t/=d)t + b; }, easeOut: function(t,b,c,d){ return -c (t/=d)(t-2) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2tt + b; return -c/2 ((--t)(t-2) - 1) + b; } }, Cubic: { easeIn: function(t,b,c,d){ return c(t/=d)tt + b; }, easeOut: function(t,b,c,d){ return c((t=t/d-1)tt + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2ttt + b; return c/2((t-=2)tt + 2) + b; } }, Quart: { easeIn: function(t,b,c,d){ return c(t/=d)ttt + b; }, easeOut: function(t,b,c,d){ return -c ((t=t/d-1)ttt - 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2tttt + b; return -c/2 ((t-=2)ttt - 2) + b; } }, Quint: { easeIn: function(t,b,c,d){ return c(t/=d)tttt + b; }, easeOut: function(t,b,c,d){ return c((t=t/d-1)tttt + 1) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return c/2ttttt + b; return c/2((t-=2)tttt + 2) + b; } }, Sine: { easeIn: function(t,b,c,d){ return -c Math.cos(t/d (Math.PI/2)) + c + b; }, easeOut: function(t,b,c,d){ return c Math.sin(t/d (Math.PI/2)) + b; }, easeInOut: function(t,b,c,d){ return -c/2 (Math.cos(Math.PIt/d) - 1) + b; } }, Expo: { easeIn: function(t,b,c,d){ return (t==0) ? b : c Math.pow(2, 10 (t/d - 1)) + b; }, easeOut: function(t,b,c,d){ return (t==d) ? b+c : c (-Math.pow(2, -10 t/d) + 1) + b; }, easeInOut: 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; } }, Circ: { easeIn: function(t,b,c,d){ return -c (Math.sqrt(1 - (t/=d)t) - 1) + b; }, easeOut: function(t,b,c,d){ return c Math.sqrt(1 - (t=t/d-1)t) + b; }, easeInOut: function(t,b,c,d){ if ((t/=d/2) < 1) return -c/2 (Math.sqrt(1 - tt) - 1) + b; return c/2 (Math.sqrt(1 - (t-=2)t) + 1) + b; } }, Elastic: { easeIn: 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/(2Math.PI) Math.asin (c/a); return -(aMath.pow(2,10(t-=1)) Math.sin( (td-s)(2Math.PI)/p )) + b; }, easeOut: 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/(2Math.PI) Math.asin (c/a); return (aMath.pow(2,-10t) Math.sin( (td-s)(2Math.PI)/p ) + c + b); }, easeInOut: function(t,b,c,d,a,p){ if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d(.31.5); if (!a || a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2Math.PI) Math.asin (c/a); if (t < 1) return -.5(aMath.pow(2,10(t-=1)) Math.sin( (td-s)(2Math.PI)/p )) + b; return aMath.pow(2,-10(t-=1)) Math.sin( (td-s)(2Math.PI)/p ).5 + c + b; } }, Back: { easeIn: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c(t/=d)t((s+1)t - s) + b; }, easeOut: 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; }, easeInOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2(tt(((s=(1.525))+1)t - s)) + b; return c/2((t-=2)t(((s=(1.525))+1)t + s) + 2) + b; } }, Bounce: { easeIn: function(t,b,c,d){ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c(7.5625tt) + 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; } }, easeInOut: function(t,b,c,d){ if (t < d/2) return Tween.Bounce.easeIn(t2, 0, c, d) .5 + b; else return Tween.Bounce.easeOut(t2-d, 0, c, d) .5 + c.5 + b; } } }
希望本文所述对大家的javascript程序设计有所帮助。
上一篇:纯JS实现本地图片预览的方法
下一篇:jquery实现手机号码选号的方法
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程