Tween.js 的下载地址： https://github.com/tweenjs/tween.js
HTML代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>tween.js的简单应用-演示</title>
<script type="text/javascript" src="./js/Tween.min.js"></script>
<!--<script type="text/javascript" src="./js/Tween.js"></script>-->
<style type="text/css">
.box {
position: relative;
margin: 20px 0 30px 0;
width: 100px;
height: 100px;
background: #089a86;
border-radius: 50% 50% 50% 50%;
}
</style>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: #008800"></div>
<div id="num" style="margin: 100px 0 0 0;font-size: 30px;">0</div>
<p>TWEEN.Easing.Linear.None</p>
<div id="TWEEN.Easing.Linear.None" class="box" style=""></div>
<p>TWEEN.Easing.Quadratic.In</p>
<div id="TWEEN.Easing.Quadratic.In" class="box" style=""></div>
<p>TWEEN.Easing.Quadratic.Out</p>
<div id="TWEEN.Easing.Quadratic.Out" class="box" style=""></div>
<p>TWEEN.Easing.Quadratic.InOut</p>
<div id="TWEEN.Easing.Quadratic.InOut" class="box" style=""></div>
<p>TWEEN.Easing.Cubic.In</p>
<div id="TWEEN.Easing.Cubic.In" class="box" style=""></div>
<p>TWEEN.Easing.Cubic.Out</p>
<div id="TWEEN.Easing.Cubic.Out" class="box" style=""></div>
<p>TWEEN.Easing.Cubic.InOut</p>
<div id="TWEEN.Easing.Cubic.InOut" class="box" style=""></div>
<p>TWEEN.Easing.Quartic.In</p>
<div id="TWEEN.Easing.Quartic.In" class="box" style=""></div>
<p>TWEEN.Easing.Quartic.Out</p>
<div id="TWEEN.Easing.Quartic.Out" class="box" style=""></div>
<p>TWEEN.Easing.Quartic.InOut</p>
<div id="TWEEN.Easing.Quartic.InOut" class="box" style=""></div>
<p>TWEEN.Easing.Quintic.In</p>
<div id="TWEEN.Easing.Quintic.In" class="box" style=""></div>
<p>TWEEN.Easing.Quintic.Out</p>
<div id="TWEEN.Easing.Quintic.Out" class="box" style=""></div>
<p>TWEEN.Easing.Quintic.InOut</p>
<div id="TWEEN.Easing.Quintic.InOut" class="box" style=""></div>
<p>TWEEN.Easing.Sinusoidal.In</p>
<div id="TWEEN.Easing.Sinusoidal.In" class="box" style=""></div>
<p>TWEEN.Easing.Sinusoidal.Out</p>
<div id="TWEEN.Easing.Sinusoidal.Out" class="box" style=""></div>
<p>TWEEN.Easing.Sinusoidal.InOut</p>
<div id="TWEEN.Easing.Sinusoidal.InOut" class="box" style=""></div>
<p>TWEEN.Easing.Exponential.In</p>
<div id="TWEEN.Easing.Exponential.In" class="box" style=""></div>
<p>TWEEN.Easing.Exponential.Out</p>
<div id="TWEEN.Easing.Exponential.Out" class="box" style=""></div>
<p>TWEEN.Easing.Exponential.InOut</p>
<div id="TWEEN.Easing.Exponential.InOut" class="box" style=""></div>
<p>TWEEN.Easing.Circular.In</p>
<div id="TWEEN.Easing.Circular.In" class="box" style=""></div>
<p>TWEEN.Easing.Circular.Out</p>
<div id="TWEEN.Easing.Circular.Out" class="box" style=""></div>
<p>TWEEN.Easing.Circular.InOut</p>
<div id="TWEEN.Easing.Circular.InOut" class="box" style=""></div>
<p>TWEEN.Easing.Elastic.In</p>
<div id="TWEEN.Easing.Elastic.In" class="box" style=""></div>
<p>TWEEN.Easing.Elastic.Out</p>
<div id="TWEEN.Easing.Elastic.Out" class="box" style=""></div>
<p>TWEEN.Easing.Elastic.InOut</p>
<div id="TWEEN.Easing.Elastic.InOut" class="box" style=""></div>
<p>TWEEN.Easing.Back.In</p>
<div id="TWEEN.Easing.Back.In" class="box" style=""></div>
<p>TWEEN.Easing.Back.Out</p>
<div id="TWEEN.Easing.Back.Out" class="box" style=""></div>
<p>TWEEN.Easing.Back.InOut</p>
<div id="TWEEN.Easing.Back.InOut" class="box" style=""></div>
<p>TWEEN.Easing.Bounce.In</p>
<div id="TWEEN.Easing.Bounce.In" class="box" style=""></div>
<p>TWEEN.Easing.Bounce.Out</p>
<div id="TWEEN.Easing.Bounce.Out" class="box" style=""></div>
<p>TWEEN.Easing.Bounce.InOut</p>
<div id="TWEEN.Easing.Bounce.InOut" class="box" style=""></div>
<script type="text/javascript">
/**
* 判断是否是数组
* @param argument
* @param {number|boolean} opt 是否用严格模式
* @return {*}
*/
function is_array(argument, opt) {
if (opt === 1 || opt === true) {
return Object.prototype.toString.call(argument) === "[object Array]";
}
return argument && (typeof argument === "object") && ("length" in argument) && (typeof argument.length === "number");
}
/**
* 判断是否是对象
* @param argument
* @return {*}
*/
function is_object(argument) {
if (argument && (typeof argument === "object") && ("length" in argument)) {
return Object.prototype.toString.call(argument) === "[object Object]";
}
return argument && (typeof argument === "object") && !("length" in argument);
}
/**
* 判断是否是函数
* @param argument
* @return {*|boolean}
*/
function is_function(argument) {
return typeof argument === "function";
}
/**
* 判断是否是字符串
* @param argument
* @return {*|boolean}
*/
function is_string(argument) {
return typeof argument === "string";
}
/**
* 判断是否是数字
* @param argument
* @return {boolean}
*/
function is_number(argument) {
return typeof argument === "number";
}
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}());
/*(function () {
var lastTime = 0;
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
//console.log("lastTime:"+lastTime+";timeToCall:"+timeToCall);
return id;
};
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}());*/
/**
* 动画二次封装
* @param {object} attr 初始属性
* @param {object} new_attr 变化后的属性
* @param {number} t 动画运行时间(毫秒)
* @param {object|TWEEN.Easing} easing 动画曲线
* @param {number} delay 动画之间的延迟
* @param {function} onUpdate 动画每次更新后执行
* @param {function} onStart 动画开始前的回调函数
* @param {function} onStop 动画结束后的回调函数
* @param {function} onComplete 动画全部结束后执行
* @param {string} AnimateName 动画名称，用来停止循环
* @return {*}
*/
function toAnimate(attr, new_attr, t, easing, delay, onUpdate, onStart, onStop, onComplete, AnimateName) {
AnimateName || (AnimateName = "aID");
if (!is_object(attr)) {
throw new Error("初始属性 attr 必须是对象");
}
if (!is_object(new_attr)) {
throw new Error("变化后的属性 attr 必须是对象");
}
if (typeof t !== "number") {
throw new Error("动画运行时间 t 必须是整数");
} else if (typeof t === "number" && t < 1) {
throw new Error("动画运行时间 t 必须是正整数");
}
var tween = new TWEEN.Tween(attr).to(new_attr, t);
easing ? tween.easing(easing) : tween.easing(TWEEN.Easing.Quadratic.Out);
(delay && typeof delay === "number") && tween.delay(delay);
typeof onUpdate === "function" && tween.onUpdate(function () {
onUpdate.call(tween, attr, new_attr, t, easing, delay);
});
typeof onStart === "function" && tween.onStart(function () {
onStart.call(tween, attr, new_attr, t, easing, delay)
});
typeof onStop === "function" && tween.onStop(function () {
onStop.call(tween, attr, new_attr, t, easing, delay);
});
tween.onComplete(function () {
typeof onComplete === "function" && onComplete.call(tween, attr, new_attr, t, easing, delay);
//停止动画
cancelAnimationFrame(window["animateID"][AnimateName]);
});
tween.start();
(Object.prototype.toString.call(window["animateID"]) === "[object Object]") || (window["animateID"] = {});
function animate() {
cancelAnimationFrame(window["animateID"][AnimateName]); //清除上一次
console.log(window["animateID"][AnimateName] = requestAnimationFrame(animate));
TWEEN.update();
}
requestAnimationFrame(animate);
return tween;
}
var box = document.getElementById("box");
var tween = toAnimate({x: 0, y: 0, n: 0}, {
x: 500,
y: 200,
n: 5000
}, 2000, TWEEN.Easing.Quadratic.Out, false, function () {
var args = arguments;
console.log(args[0]);
num.innerHTML = ~~(args[0].n);
box.style.setProperty('transform', 'translate(' + args[0].x + 'pt,' + args[0].y + 'pt)');
}, false, false, function () {
setTimeout(function () {
toAnimate({x: 500, y: 200,}, {x: 0, y: 0,}, 2000, TWEEN.Easing.Quadratic.Out, false, function () {
var args = arguments;
console.log(args[0]);
//num.innerHTML = ~~(args[0].x);
box.style.setProperty('transform', 'translate(' + args[0].x + 'pt,' + args[0].y + 'pt)');
}, false, false, false, "_2233");
}, 3000);
}, "_2233");
//暂停动画
//tween.pause();
//继续动画
//tween.resume();
document.body.addEventListener("click", function (e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if (target.tagName.toLocaleLowerCase() === "div" && target.className === "box") {
var tween = toAnimate({x: 0, y: 0}, {
x: 500,
y: 200
}, 1000, eval(target.getAttribute("id")), false, function () {
var args = arguments;
target.style.setProperty("left", args[0].x + "px");
}, false, false, false, target.getAttribute("id"));
}
}, false);
</script>
</body>
</html> 如图：
tween.js 代码解压
tween.js代码就不写了，自己去下载，我这个版本是18.3.2的，或者可以区演示地址浏览器F12拿代码