Tween.js 的简单应用--方文锋的个人网站

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拿代码

演示地址

	<!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>