TweenJS
来源：互联网 发布：淘宝售后多长时间 编辑：程序博客网 时间：2024/05/18 00:41
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>TweenJS</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
#div1{
width:50px;
height:50px;
background: red;
position:relative;
top:0;
}
</style>
</head>
<body>
<divid="div1">
</div>
<!--
缓动函数(补间动画) ---- 过渡动画
1.第三方动画
2.实现:缓动公式 效果:控制物体在某个时间段内的运动速度.
缓动函数
1.linear: 匀速
2.Quad: 二次方缓动效果
3.Cubic: 三次方缓动效果
4.Quart: 四次方缓动效果
5.Quint: 五次方缓动效果
6.Sine: 正弦缓动效果
7.Expo: 指数缓动效果
8.Circ: 圆形缓动效果
9.Elastic: 指数衰减的正弦曲线缓动效果
10.Back: 超过三次方的缓动效果
11.Bounce: 指数衰减的反弹曲线缓动效果
除了linear, 每种缓动效果下还有三种效果
1.easeOut: 减速
2.easeIn: 加速
3.easeInOut: 先加速后减速
每个函数都有四个参数
1.t: 开始的步数(从0开始)
2.b: 开始量(开始的属性值)
3.c: 改变量(属性值的改变量 = 结束时的属性值 - 开始时的属性值)
4.d: 结束步数(总时间)
注意:当开始步数与结束步数相同时,整个动画执行结束.
注意!!!:只有当t与d相等才会结束运动,小于或超过都不会结束动画.
tween.js的使用步骤:
1.下载
2.引入tween.js
3.使用tween.js的语法:
Tween.缓动函数名.缓动效果名(t, b, c, d);
-->
<scriptsrc="JS/tween.js">
</script>
<scripttype="text/javascript">
vardiv1 = document.getElementById("div1");
//开始的步数 t
vart = 0;
//开始量 b
varb = 0;
//改变量 c
varend = 500;
var c = end - b;
//结束步数 d
var d = 500;
functionmove(){
t+=5;
if(t== d){
clearInterval(timer);
}
div1.style.left= Tween.Linear(t, b, c, d) + "px";
}
var timer = setInterval(move, 1);
</script>
</body>
</html>
// JavaScript Document
var Tween = {
Linear: function(t,b,c,d){return c*t/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/2*t*t+ b;
return -c/2* ((--t)*(t-2)- 1) + b;
}
},
Cubic: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t+ b;
},
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t+ 1) + b;
},
easeInOut: 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;
}
},
Quart: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t+ b;
},
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t- 1) + b;
},
easeInOut: 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;
}
},
Quint: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t*t*t*t+ b;
},
easeOut: function(t,b,c,d){
return c*((t=t/d-1)*t*t*t*t+ 1) + b;
},
easeInOut: 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;
}
},
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.PI*t/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 -t*t) - 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/(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;
},
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/(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);
},
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*(.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;
}
},
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*(t*t*(((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.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;
}
},
easeInOut: 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;
}
}
}
- TweenJS
- Tweenjs中的Ease示例
- Tweenjs中的MotionGuidePlugin示例
- tweenjs大图滚动
- CreateJS 学习4 动画、TweenJS
- 使用threejs+tweenjs实现图片炸裂效果
- TweenJS 一个简单但强大的渐变界面
- 基于opencv的单张图像去雾算法（一）
- android自定义ViewGroup之瀑布流FlowLayout 简洁明了 支持padding和margin 100行代码搞定
- テクニカルアーティストに必要な資料集めようぜ！
- 微信公众号开发——模板消息
- 交叉编译libxml2到ARM平台
- TweenJS
- 31. Next Permutation
- 百度地图定位之获取所在城市
- 翻转链表
- Node.js 异步异常的处理与domain模块解析
- Ubuntu通过apt-get install安装mysql后pdo_mysql无法连接的解决方法
- 使用C语言进行面向对象的开发－－GObject入门［7］
- 1613-3-傅溥衍 总结《2016年10月18日》【连续第十八天总结】
- iOS下ffmepg开发的一些参考资料汇总
