首先，关于缓动补间动画算法（Tween Animation Algorithm），它可以让我们通过设置起点（begin）和终点（end）的数值之间进行动画过渡，使得物体的运动轨迹更加自然平滑。而有了tween.js这样的js库之后，我们可以简单而快捷地实现各种动画效果。
以下是关于tween.js的完整攻略：
首先，我们需要在HTML文档中引入tween.js，即通过以下代码行将其导入到HTML文档中：
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script>
在代码中，我们需要创建一个Tween对象，这个对象将用于控制我们要做的缓动效果。创建代码如下：
var tween = new TWEEN.Tween(object);
这里的object可以是任意你想作用的对象。比如，你可以设置一个简单的数字：
var number = 0;
var tween = new TWEEN.Tween(number);
当我们用Tween对象控制这个object时，我们需要指定它的起始值。这可以通过如下代码来设定：
tween.from({value: 0});
这里的value是我们要从起点开始控制的值。最终运动结束时会变成什么样子呢？这就是我们下一步要讨论的了。
为了让object运动起来并在终点停止，我们需要指定它的结束值。这可通过如下代码实现：
tween.to({value: 100}, 1000);
从这里我们可以看到，value的结束值为100，而1000表示持续的毫秒数。也就是说，在执行我们的缓动动画时，这个数字将会在1000ms内从0逐渐变向100。
到了这一步，我们已经设置完了object的起始和结束值，并且知道了代码执行的时间。我们要给它添加缓动效果，让过渡更加自然。例如：
tween.easing(TWEEN.Easing.Quadratic.InOut);
这里使用的缓动效果是“Quadratic In-Out”。可以在tween.js的官网上找到其他可用的缓动效果。
当所有设置都完成之后，我们需要启动缓动动画。这可以通过使用Tween.js的 animate 函数来实现：
tween.start();
在此第一个示例中，我们将创建一个在WebGL上下文中运行的动画场景，该场景中显示在网格上环绕着蓝色方块的动态小球。请在你的代码编辑器中打开空白文件，并编写以下代码：
var renderer, scene, camera, cube, sphere;
function init() {
//create the renderer
renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('canvas')
})
renderer.setClearColor(0xdcdcdc);
renderer.setPixelRatio(window.devicePixelRatio || 1);
renderer.setSize(window.innerWidth, window.innerHeight);
//create the scene
scene = new THREE.Scene();
//create the camera
camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set(0, 0, 10);
//create the light
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(1, 1, 1);
scene.add(light);
//create the geometry
var geometry = new THREE.BoxGeometry(1, 1, 1);
//create the material
var material = new THREE.MeshPhongMaterial({color: 0x0000ff});
//create the cube mesh
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
//create the sphere mesh
var geometry = new THREE.SphereGeometry(1, 30, 30);
var material = new THREE.MeshPhongMaterial({color: 0x00ff00});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
}
function animate() {
requestAnimationFrame(animate);
//update the Tween values
TWEEN.update();
//update the sphere position
sphere.position.x = Math.cos(cube.rotation.y) * 2.5;
sphere.position.y = Math.sin(cube.rotation.y) * 2.5;
//rotate the cube
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
//render the scene
renderer.render(scene, camera);
}
init();
animate();
上述代码中，我们创建了一个动画场景、一个渲染器、一个镜头、一个照明、一个立方体和一个球体网格。我们还定义了一个名为"animate"的函数，用于执行Tween.js的update()函数来更新小球的位置。
我们还添加了一些代码来给立方体添加旋转效果。在"animate"函数中你可以看到，我们将小球固定在立方体的一个旋转点上。小球会在立方体旋转的同时绕其周围旋转。
请打开这个网址，查看该示例的完整效果：https://codepen.io/Henry_Johnson/pen/RwgQqYM
在这第二个示例中，我们将使用Tween.js和SVG创建一个类似时钟的运动效果。请在你的代码编辑器中打开空白文件，并编写以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG Clock</title>
<style>
svg {
width: 200px;
height: 200px;
stroke: #333;
stroke-width: 2;
fill: #9ce8ff;
}
</style>
</head>
<body>
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="22"/>
<line id="hourHand" x1="25" y1="25" x2="25" y2="15"/>
<line id="minuteHand" x1="25" y1="25" x2="25" y2="10"/>
<line id="secondHand" x1="25" y1="25" x2="25" y2="7"/>
<circle cx="25" cy="25" r="1"/>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script>
<script>
var hourHand = document.querySelector('#hourHand');
var minuteHand = document.querySelector('#minuteHand');
var secondHand = document.querySelector('#secondHand');
var currentTime = new Date();
var hour = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
var minutePoints = getMinutePoints();
var hourPoints = getHourPoints();
function getMinutePoints() {
var points = [];
for(var i = 0; i < 60; i++) {
var x = 25 + 20 * Math.sin((i / 60) * 2 * Math.PI);
var y = 25 - 20 * Math.cos((i / 60) * 2 * Math.PI);
points.push({x: x, y: y});
}
return points;
}
function getHourPoints() {
var points = [];
for(var i = 0; i < 12; i++) {
var x = 25 + 15 * Math.sin((i / 12) * 2 * Math.PI);
var y = 25 - 15 * Math.cos((i / 12) * 2 * Math.PI);
points.push({x: x, y: y});
}
return points;
}
function updateClock() {
var t = new Date();
var secondsTween = new TWEEN.Tween({val: seconds / 60}).to({val: (seconds + 1) / 60}, 1000).onUpdate(function() {
var angle = secondsTween.exportVal().val * 2 * Math.PI;
var x = (25 + 20 * Math.sin(angle)).toFixed(2);
var y = (25 - 20 * Math.cos(angle)).toFixed(2);
secondHand.setAttribute('x2', x);
secondHand.setAttribute('y2', y);
});
var minutesTween = new TWEEN.Tween({val: minutes / 60}).to({val: (minutes + 1) / 60}, 1000).onUpdate(function() {
var angle = minutesTween.exportVal().val * 2 * Math.PI;
var x = (25 + 20 * Math.sin(angle)).toFixed(2);
var y = (25 - 20 * Math.cos(angle)).toFixed(2);
minuteHand.setAttribute('x2', x);
minuteHand.setAttribute('y2', y);
});
var hourTween = new TWEEN.Tween({val: hour / 12}).to({val: ((hour + 1) % 12) / 12}, 1000).onUpdate(function() {
var angle = hourTween.exportVal().val * 2 * Math.PI;
var x = (25 + 15 * Math.sin(angle)).toFixed(2);
var y = (25 - 15 * Math.cos(angle)).toFixed(2);
hourHand.setAttribute('x2', x);
hourHand.setAttribute('y2', y);
});
secondsTween.start();
minutesTween.start();
hourTween.start();
if(++seconds == 60) {
seconds = 0;
minutes++;
}
if(minutes == 60) {
minutes = 0;
hour++;
}
if(hour == 24) {
hour = 0;
}
setTimeout(updateClock, 1000);
}
updateClock();
</script>
</body>
</html>
在此示例中，我们使用SVG元素来构建一些基本的形状以表示数字时钟的表盘和指针。我们将Web页面的背景颜色设置为浅灰色，以使这些形状看起来更显著。因此，在头部样式中，你可以看到我们如何通过CSS来定义SVG元素的样式。
在Javascript部分代码中，我们创建了一个名为"updateClock"的函数，并使用这个函数来更新时钟上的指针。我们先初始化一个名为"currentTime"的新Date对象，并获取小时、分钟和秒的数值。然后创建一个数组用来存储指向每分钟和每小时的坐标点。
随后，我们为每个指针创建一个Tween。我们设定它们的初始值（从seconds / 60，minutes / 60和hour / 12到（seconds + 1）/ 60，（minutes + 1）/ 60和（hour + 1）% 12 / 12）。然后，我们将使用setAttribute来设置彼此间的坐标点。在这个例子中，我们正在更改x和y坐标来改变指针的位置。在onUpdate事件中，我们使用Tween.js导出出的当前值来计算每个指针的新位置。
请使用时间久一点的钟表效果演示网站来查看该示例的完整效果：https://jsbin.com/memuxut/edit?html,css,js
以上便是关于tween.js缓动补间动画算法示例的完整攻略。祝你使用愉快！
本文链接：http://task.lmcjl.com/news/11838.html