数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装学
法学使用 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 }
链式缓动动画
在这个缓动动画中，我们将看到如何链式调用缓动动画。这个特定的缓动动画将等待 0.5 秒，然后将目标对象的 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>
如果您在浏览器中运行上述代码，您将获得一个动画。单击任意位置后，动画圆圈将对您的鼠标移动和点击做出反应。
解释
在上面的代码中，我们首先在 body 加载时调用名为 onInit() 的函数，然后与 Tween 和圆形动画相关的所有内容都在该函数内部发生。
首先，我们使用 Stage() 方法创建一个画布。
接下来，我们在该画布上启用 DOM 事件，然后我们还为该画布启用 mouseover 事件。
然后，我们使用代码行 createjs.Touch.enable(stage) 启用触摸属性。
下一步是绘制一个圆圈，然后为每个形状设置 graphics 属性的值为我们选择的某些指定值。您可以根据自己的选择随意更改它们。
之后，我们使用 Tween 获取画布，然后附加一些坐标位置，然后将值推入其中。
在下一步中，我附加了一个 eventListener，一个名为 handleMouseUp 的函数将被调用，在这个函数中，我们检查是否有人点击了文本。如果没有，我们将覆盖 Tween 动画并使用当前 circleCount 更新 activeCount。
在上面的示例中，我还使用了 tick 函数，在这个函数中，我只是检查 activeCount 是否存在，然后我使用事件更新当前阶段。
结论
在本教程中，我们解释了如何使用 Tween.js 对 HTML5 和 JavaScript 属性进行缓动和动画处理。
473 次浏览
