使用 Tween.js 对 HTML5 和 JavaScript 属性进行补间和动画处理
Tween.js 是一个 JavaScript 库，主要用于对 HTML5 或 JavaScript 属性进行补间或动画处理。它可以独立工作，也可以与 Easel.js 集成工作。在本教程中，我们将通过几个示例学习如何使用 Tween.js。
在继续主要示例之前，让我们先讨论几个简单的补间，这样当我们在主要示例中使用它们时，您就不会不知所措。
简单补间
在此补间中，我们将目标的 alpha 属性从 0 补间到 1，持续 500 毫秒，然后我们将调用 handleComplete 函数，我们已通过 call 方法将其链接起来。
target.alpha = 0; createjs.Tween.get(target).to({alpha:1}, 500).call(handleComplete); function handleComplete() { // Tween done }
可链接的 Tween
在此 Tween 中，我们将了解如何链接 Tween。此特定 Tween 将等待 0.5 秒，然后我们将在 500 毫秒内将目标的 alpha 属性更改为 0，然后将其"visible"设置为 false。最后，我们将调用 handleComplete 函数。
target.alpha = 1; createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 500).call(handleComplete); function handleComplete() { // Tween one }
示例
现在让我们将焦点转移到主要示例。在这个程序中，我们将尝试创建一个活动的圆圈。所谓活动，是指当您移动鼠标时，它会改变其位置，并且您会在移动过程中获得良好的动画效果。这是 Tween.js 的一个很好的例子，我们将在其中使用不同的 tween.js 函数和方法。
<!DOCTYPE html>
<html>
<head>
<title>TweenJS Example: Circles</title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script id="editable">
let canvas;
let stage;
let tweens;
let activeCount;
let circleCount = 25;
let text;
function init() {
canvas = document.getElementById("simpleCanvas");
stage = new createjs.Stage(canvas);
stage.enableDOMEvents(true);
tweens = [];
stage.enableMouseOver(10);
createjs.Touch.enable(stage);
for (let i = 0; i < circleCount; i++) {
let circle = new createjs.Shape();
circle.graphics.setStrokeStyle(15);
circle.graphics.beginStroke("#113355");
circle.graphics.drawCircle(0, 0, (i + 1) * 4);
circle.alpha = 1 - i * 0.02;
circle.x = Math.random() * 550;
circle.y = Math.random() * 400;
circle.compositeOperation = "lighter";
let tween = createjs.Tween.get(circle).to({
x: 275,
y: 150
}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);
tweens.push({
tween: tween,
ref: circle
});
stage.addChild(circle);
}
activeCount = circleCount;
stage.addEventListener("stagemouseup", handleMouseUp);
text = new createjs.Text("Click to Tween", "24px Arial", "#777");
text.x = 350;
text.y = 200;
stage.addChild(text);
createjs.Ticker.addEventListener("tick", tick);
}
function handleMouseUp(event) {
if (text) {
stage.removeChild(text);
text = null;
}
for (let i = 0; i < circleCount; i++) {
let ref = tweens[i].ref;
let tween = tweens[i].tween;
createjs.Tween.get(ref, {
override: true
}).to({
x: stage.mouseX,
y: stage.mouseY
}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut).call(tweenComplete);
}
activeCount = circleCount;
}
function tweenComplete() {
activeCount--;
}
function tick(event) {
if (activeCount) {
stage.update(event);
}
}
</script>
</head>
<body onload="init();">
<header class="TweenJS">
<h3>TweenJS Plugin Example</h3>
</header>
<canvas id="simpleCanvas" width="580" height="350" style="background:#000;"></canvas>
</body>
</html>
如果您在浏览器中运行上述代码，您将获得一个动画。一旦您单击任意位置，动画圆圈将对您的鼠标移动和单击做出反应。
解释
在上面的代码中，我们首先在主体加载时调用名为 onInit() 的函数，然后与 Tween 和圆圈动画相关的所有操作都发生在该函数内。
首先，我们使用 Stage() 方法创建一个画布
接下来，我们在该画布上启用 DOM 事件，然后我们还为该画布启用 mouseover。
此后，我们使用行 createjs.Touch.enable(stage) 启用 Touch 属性。
下一步是绘制一个圆圈，然后对于每个形状，我们将图形属性值设置为我们选择的一些指定值。您可以根据自己的选择随意更改它们。
稍后，我们将使用 Tween 获取画布，然后附加一些坐标位置，然后将值推送到其中。
在下一步中，我将附加一个 eventListener，在该事件侦听器上将调用一个名为 handleMouseUp 的函数，在该函数中，我们将检查是否有人单击了文本。如果没有，那么我们将覆盖 Tween 动画并使用当前的 circleCount 更新 activeCount 。
在上面的例子中，我也使用了 tick 函数，其中我只是检查 activeCount 是否存在，然后使用事件更新当前阶段。
结论
在本教程中，我们解释了如何使用 Tween.js 对 HTML5 和 JavaScript 属性进行补间和动画处理。
