在 ScheduleJS 中繪製動畫

ScheduleJS 使用 HTML Canvas 渲染引擎來繪製網格、活動、附加層和連結。本文介紹如何使用 HTML Canvas API 設計簡單的 ScheduleJS 渲染動畫

關於 HTML Canvas 的幾句話

您以前使用過 Canvas 技術嗎？ canvas 元素是一個 HTML 容器，用於使用 JavaScript 以程式設計方式進行繪製，而瀏覽器的成本卻低得驚人。

canvas元素最顯著的特徵是它在設計和互動方面具有無限的可能性。螢幕上內容的唯一限制是我們的想像。

如果你想把你的頭圍繞在canvas元素上，你可以將它比作一張空白的畫紙。

根據 MDN 網路文件：

MDN：Canvas API 提供了一種透過 JavaScript 和 HTML canvas 元素繪製圖形的方法。除此之外，它還可用於動畫、遊戲圖形、資料視覺化、照片處理和即時視訊處理。

Canvas API 主要專注於 2D 圖形。 WebGL API 也使用 canvas 元素，繪製硬體加速的 2D 和 3D 圖形。

ScheduleJS 如何使用它？

在畫布上繪製活動後，使其變化的唯一方法就是清理它並重新開始繪製。

在底層，ScheduleJS 實作了多種工具來在調度應用程式的上下文中處理此行為。這些 API 有時會暴露給開發人員，有時會默默工作，讓開發人員專注於應用程式的核心功能，如下所示：

• 系統層 API 處理連續的繪圖和堆疊順序。
• Viewport API 優化了渲染和導航。
• 渲染器 API 定義如何繪製活動和圖層。
• 可以隨意呼叫Redraw API，觸發重繪、行操作等…

此架構中對於開發人員來說最重要的專案是 ScheduleJS Renderer API。渲染器使用可重寫的函數，允許開發人員創建他或她繪製應用程式特定部分的獨特方式：

• 背景
• 網格
• 活動
• 活動連結
• 拖放層
• 以及每一個額外的系統層

雖然這對某些人來說可能看起來很複雜，但開發人員很快就會習慣它的工作流程。渲染器架構的靈活性及其深思熟慮的實現允許無盡的設計和互動場景。

動畫化您的 ScheduleJS 活動

要為 Canvas 製作動畫，您必須將動畫分解為幀並告訴渲染器如何繪製每個幀。創建簡單線性動畫所需的主要成分是動畫開始的時間。如果我們想單獨為每個活動製作動畫，那麼儲存此資訊的好地方就是活動資料結構。

// A simple activity class storing the animation start date as a timestamp
export class MyActivity extends MutableActivityBase {
  animationStart: number = undefined;
}

讓我們建立一個簡單的動畫渲染器來根據動畫進度繪製每一幀。這個簡單的寬度動畫將為我們的創建活動添加動畫（從 0% 寬度到全寬度）。

// Create our activity renderer for our simple animation
export class MyActivityRenderer extends ActivityBarRenderer<MyActivity, Row> {

  // Our animation takes 250ms
  private _animationDurationMs: number = 250;

  // Override the drawActivity method of the ActivityBarRenderer
  protected drawActivity(activityRef: ActivityRef<Action>, position: ViewPosition, ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, selected: boolean, hover: boolean, highlighted: boolean, pressed: boolean): ActivityBounds {

    // What time is it? :)
    const now = Date.now();

    // Access your activity in the renderer
    const activity = activityRef.getActivity();

    // Set animationStart timestamp
    if (activity.animationStart === undefined) {
      activity.animationStart = now;
    }

    // The animationTimer tells us the current frame
    const animationTimer = now - activity.animationStart;

    // Calculate the sequence: 0 = animation starts, 1 = animation ends
    const sequence = animationTimer / this._newActionAnimationDurationMs;

    // Let's play with the width: starts at 0%, ends at 100%
    w *= sequence > 1 ? 1 : sequence;

    // Note: Calling directly graphics.redraw() will cause an infinite loop
    requestAnimationFrame(() => { 
      // Force a redraw on every animation frame
      this.getGraphics().redraw();
      // Our custom drawing method
      this.drawMyActivity(activity, x, y, w, h, selected, hover, highlighted, pressed); 
    });

    return new ActivityBounds(activityRef, x, y, w, h);
  }

此範例重點在於運行動畫所需的程式碼。正如您所看到的，我們創建了一個描述動畫持續時間的比率（從 0 到 1），我們只需將寬度乘以該比率即可。結果，活動寬度將以平滑的 250 毫秒動畫擴展（見下文）。

使用相同的原理可以完成更多工作，因為 ScheduleJS 中的每個繪圖層都使用渲染器架構並實作類似的繪圖方法。除此之外，可以使用許多不同的方法來實現相同的結果。無論如何，無論您想要建立什麼圖形動畫，ScheduleJS 渲染器都可以讓您在像素層級設計和自訂使用者體驗。

如果您對 ScheduleJS 有任何 UX/UI 挑戰或想法，請隨時與我們聯繫！

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