Tween.js:一个JS库,其效果是可以让元素平滑地执行简单的动画效果
使用方式:<script src = "tween.js" > < /script>
在文件中引入tween.js文件
具体方法:
以上每种方式都有三种不影响总时间和总路程的缓动效果:
使用参数:
使用实例:
元素使用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);