当前位置: 首页 > 工具软件 > Tween > 使用案例 >

Tween

孔甫
2023-12-01

Tween.js:一个JS库,其效果是可以让元素平滑地执行简单的动画效果
使用方式:<script src = "tween.js" > < /script>在文件中引入tween.js文件
具体方法:

  • Linear:线性 (匀速)
  • Quad: 二次方缓动效果
  • Cubic: 三次方缓动效果
  • Quart:四次方缓动效果
  • Quint:五次方缓动效果
  • Sine:正弦缓动效果
  • Expo:指数缓动效果
  • Circ:圆形缓动效果
  • Elastic:指数衰减正弦曲线缓动函数
  • Back:超过范围的三次方的缓动函数
  • Bounce:指数衰减的反弹曲线缓动函数

以上每种方式都有三种不影响总时间和总路程的缓动效果:

  • easeIn:逐渐加速
  • easeOut:逐渐减速
  • easeInOut:先加速后减速

使用参数:

  • t:动画已经执行时间
  • b:初始的位置
  • c:变化的数值
  • d:总时间

使用实例:

元素使用tween来获得简单的缓动效果:
	var t = 0;
	var b = 0;
	var c = 100;
	var d = 200;
	var box = document.getElementsByClassName("box")[0];
	var time = setInterval(function () {
		t++;
		if(t >= d){
			clearInterval(time);
		}
		box.style.left = Tween.Linear(t,b,c,d) + "px";
		box.style.top = Tween.Linear(t,b,c,d) + "px";
	},50);
 类似资料: