TweenJS

最新推荐文章于 2022-07-06 11:12:00 发布

紫颖梦忆

最新推荐文章于 2022-07-06 11:12:00 发布

阅读量671

点赞数

分类专栏：随笔

本文链接：https://blog.csdn.net/jiaqingge/article/details/52848093

版权

随笔专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

<title>TweenJS</title>

* {

margin: 0;

padding: 0;

}

#div1 {

width: 50px;

height: 50px;

background: red;

position: relative;

top: 0;

}

</style>

</head>

<body>

</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);

-->

</script>

var div1 = document.getElementById("div1");

//开始的步数 t

var t = 0;

//开始量 b

var b = 0;

//改变量 c

var end = 500;

var c = end - b;

//结束步数 d

var d = 500;

function move(){

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;

}

紫颖梦忆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TweenJS

DOCTYPE html>html>head>metacharset="UTF-8">title>TweenJStitle>styletype="text/css">*{margin:0;padding:0;}#div1{width:50px;height:50px;background: red;positi
复制链接

扫一扫

专栏目录

TweenJS

“相关推荐”对你有帮助么？