資料結構
網路
關係資料庫管理系統 (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 次瀏覽
