使用Tween.js对HTML5和JavaScript属性进行补间和动画

Tween.js是一个JavaScript库，主要用于对HTML5或JavaScript属性进行Tween或动画处理。它可以单独使用，也可以与Easel.js集成。在本教程中，我们将学习如何通过几个示例来使用Tween.js。

在进入主要示例之前，让我们先讨论几个简单的Tween，以便在主示例中使用它们时不会感到不知所措。

简单Tween

在这个Tween中，我们将从0到1 Tween目标的alpha属性，持续500 ms，然后通过调用方法链的方式调用handleComplete函数。

target.alpha = 0;
createjs.Tween.get(target).to({alpha:1}, 500).call(handleComplete);
function handleComplete() {
    // Tween done
}

可链式 Tween

在这个 Tween 中，我们将看到如何链式使用 Tween。这个特定的 Tween 将等待 0.5s，然后将目标的 alpha 属性在 500 毫秒内补间到 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动画，并更新 activeCount 为当前的 circleCount 。