HTML5<canvas></canvas>元素結(jié)合JavaScript 的Canvas API，構(gòu)成了網(wǎng)頁上主要的柵格圖形和動畫功能之一。 Canvas 的一個常見用例是為網(wǎng)站（特別是遊戲）以編程方式生成圖像。我構(gòu)建的一個紙牌接龍遊戲網(wǎng)站正是這樣做的，其中所有紙牌及其移動都使用canvas 完成。

本文將重點關(guān)注canvas 中的動畫以及使動畫看起來更流暢的技術(shù)。我們將特別關(guān)注緩動過渡（例如“ease-in”和“ease-out”），這些過渡在canvas 中不像CSS 中那樣是免費提供的。

讓我們從一個靜態(tài)canvas 開始。我已經(jīng)在canvas 上繪製了一張從DOM 中獲取的撲克牌：

讓我們從一個基本的動畫開始：在canvas 上移動那張撲克牌。即使是很基本的事情，在canvas 中也需要從頭開始工作，因此我們必須開始構(gòu)建我們可以使用的函數(shù)。

首先，我們將創(chuàng)建一些函數(shù)來幫助計算X 和Y 坐標：

 function getX(params) {
  let distance = params.xTo - params.xFrom;
  let steps = params.frames;
  let progress = params.frame;
  return distance / steps * progress;
}

function getY(params) {
  let distance = params.yTo - params.yFrom;
  let steps = params.frames;
  let progress = params.frame;
  return distance / steps * progress;
}

這將幫助我們在圖像動畫時更新位置值。然後，我們將不斷重新渲染canvas，直到動畫完成。我們通過將以下代碼添加到我們的addImage()方法來實現(xiàn)這一點。

 // ... (省略部分代碼) ...
if (params.frame <p>現(xiàn)在我們有了動畫！我們每次都在穩(wěn)定地遞增1 個單位，我們稱之為<em>線性</em>動畫。</p><p>您可以看到形狀如何以線性方式從A 點移動到B 點，在兩點之間保持相同的恆定速度。它功能齊全，但缺乏真實感。開始和停止很突兀。</p><p>我們想要的是物體加速（ease-in）和減速（ease-out），這樣它就能模擬現(xiàn)實世界中物體在摩擦力和重力作用下的運動。</p><p></p><h2> JavaScript 緩動函數(shù)</h2><p>我們將使用“三次”ease-in 和ease-out 過渡來實現(xiàn)這一點。我們修改了Robert Penner 的Flash 緩動函數(shù)中找到的方程式之一，使其適合我們在這裡想要做的事情。</p><pre class="brush:php;toolbar:false"> function getEase(currentProgress, start, distance, steps) {
  currentProgress /= steps/2;
  if (currentProgress <p>將其插入到我們的代碼中（這是一個<strong>三次緩動</strong>），我們將得到一個更平滑的結(jié)果。請注意，卡片如何加速朝向空間的中心，然後在到達終點時減速。</p><p></p><h2>使用JavaScript 進行高級緩動</h2><p>我們可以使用二次或正弦緩動來獲得更慢的加速度。</p><pre class="brush:php;toolbar:false"> function getQuadraticEase(currentProgress, start, distance, steps) {
  currentProgress /= steps/2;
  if (currentProgress <p>為了獲得更快的加速度，可以使用五次或指數(shù)緩動：</p><pre class="brush:php;toolbar:false"> function getQuinticEase(currentProgress, start, distance, steps) {
  currentProgress /= steps/2;
  if (currentProgress <p></p><h3>使用GSAP 實現(xiàn)更複雜的動畫</h3><p>自己編寫緩動函數(shù)很有趣，但是如果您想要更強大的功能和靈活性呢？您可以繼續(xù)編寫自定義代碼，也可以考慮使用更強大的庫。讓我們?yōu)榇宿D(zhuǎn)向GreenSock 動畫平臺(GSAP)。</p><p>使用GSAP，動畫的實現(xiàn)變得容易得多。以這個例子為例，卡片在結(jié)束時會反彈。請注意，GSAP 庫包含在演示中。</p><p>關(guān)鍵函數(shù)是<code>moveCard</code> ：</p><pre class="brush:php;toolbar:false"> function moveCard() {
  gsap.to(position, {
    duration: 2,
    ease: "bounce.out",
    x: position.xMax,
    y: position.yMax,
    onUpdate: function() {
      draw();
    },
    onComplete: function() {
      position.x = position.origX;
      position.y = position.origY;
    }
  });
}

gsap.to方法是所有魔法發(fā)生的地方。在兩秒的持續(xù)時間內(nèi)，位置對像被更新，並且每次更新時都會調(diào)用onUpdate ，從而觸發(fā)canvas 的重繪。

而且我們不僅僅是在談?wù)摲磸棥Ｓ写罅康牟煌弰舆x項可供選擇。

總結(jié)

仍然不確定在canvas 中使用哪種動畫樣式和方法進行緩動？這裡有一個演示不同的緩動動畫的示例，包括GSAP 中提供的動畫。

查看我的紙牌接龍遊戲以查看非GSAP 動畫的實時演示。在這種情況下，我已經(jīng)添加了動畫，以便遊戲中的卡片在它們在堆之間移動時ease-out 和ease-in。

除了創(chuàng)建運動之外，緩動函數(shù)還可以應(yīng)用於任何具有起始和結(jié)束狀態(tài)的其他屬性，例如不透明度、旋轉(zhuǎn)和縮放的變化。我希望您能找到許多方法來使用緩動函數(shù)，使您的應(yīng)用程序或遊戲看起來更流暢。

以上是寬鬆的動畫的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！