在 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中文网其他相关文章！