寬鬆的動畫

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

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

讓我們從一個靜態canvas 開始。我已經在canvas 上繪製了一張從DOM 中獲取的撲克牌：

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

首先，我們將創建一些函數來幫助計算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()方法來實現這一點。

 // ... (省略部分代碼) ...
if (params.frame <p>現在我們有了動畫！我們每次都在穩定地遞增1 個單位，我們稱之為<em>線性</em>動畫。</p><p>您可以看到形狀如何以線性方式從A 點移動到B 點，在兩點之間保持相同的恆定速度。它功能齊全，但缺乏真實感。開始和停止很突兀。</p><p>我們想要的是物體加速（ease-in）和減速（ease-out），這樣它就能模擬現實世界中物體在摩擦力和重力作用下的運動。</p><p></p><h2 id="JavaScript-緩動函數"> JavaScript 緩動函數</h2><p>我們將使用“三次”ease-in 和ease-out 過渡來實現這一點。我們修改了Robert Penner 的Flash 緩動函數中找到的方程式之一，使其適合我們在這裡想要做的事情。</p><pre class="brush:php;toolbar:false"> function getEase(currentProgress, start, distance, steps) {
  currentProgress /= steps/2;
  if (currentProgress <p>將其插入到我們的代碼中（這是一個<strong>三次緩動</strong>），我們將得到一個更平滑的結果。請注意，卡片如何加速朝向空間的中心，然後在到達終點時減速。</p><p></p><h2 id="使用JavaScript-進行高級緩動">使用JavaScript 進行高級緩動</h2><p>我們可以使用二次或正弦緩動來獲得更慢的加速度。</p><pre class="brush:php;toolbar:false"> function getQuadraticEase(currentProgress, start, distance, steps) {
  currentProgress /= steps/2;
  if (currentProgress <p>為了獲得更快的加速度，可以使用五次或指數緩動：</p><pre class="brush:php;toolbar:false"> function getQuinticEase(currentProgress, start, distance, steps) {
  currentProgress /= steps/2;
  if (currentProgress <p></p><h3 id="使用GSAP-實現更複雜的動畫">使用GSAP 實現更複雜的動畫</h3><p>自己編寫緩動函數很有趣，但是如果您想要更強大的功能和靈活性呢？您可以繼續編寫自定義代碼，也可以考慮使用更強大的庫。讓我們為此轉向GreenSock 動畫平台(GSAP)。</p><p>使用GSAP，動畫的實現變得容易得多。以這個例子為例，卡片在結束時會反彈。請注意，GSAP 庫包含在演示中。</p><p>關鍵函數是<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方法是所有魔法發生的地方。在兩秒的持續時間內，位置對像被更新，並且每次更新時都會調用onUpdate ，從而觸發canvas 的重繪。

而且我們不僅僅是在談論反彈。有大量的不同緩動選項可供選擇。

總結

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

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

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

以上是寬鬆的動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！