Zeichnen von Animationen in ScheduleJS

ScheduleJS verwendet die HTML-Canvas-Rendering-Engine, um das Raster, Aktivitäten, zusätzliche Ebenen und Links zu zeichnen. In diesem Artikel wird erläutert, wie Sie mithilfe der HTML Canvas-API eine einfache ScheduleJS-Rendering-Animation entwerfen

Ein paar Worte zu HTML Canvas

Haben Sie schon einmal die Canvas-Technologie verwendet? Das Canvas-Element ist ein HTML-Container, der zum programmgesteuerten Zeichnen mit JavaScript zu überraschend geringen Kosten für den Browser verwendet wird.

Das wichtigste Merkmal des Canvas-Elements ist, dass seine Möglichkeiten in Bezug auf Design und Interaktionen endlos sind. Die einzige Grenze für das, was auf dem Bildschirm angezeigt wird, ist unsere Vorstellungskraft.

Wenn Sie Ihren Kopf um das Leinwandelement wickeln möchten, können Sie es mit einem leeren Zeichenpapier vergleichen.

Laut der MDN-Webdokumentation:

MDN: Die Canvas-API bietet eine Möglichkeit zum Zeichnen von Grafiken über JavaScript und das HTML-Canvas-Element. Es kann unter anderem für Animationen, Spielgrafiken, Datenvisualisierung, Fotomanipulation und Echtzeit-Videoverarbeitung verwendet werden.

Die Canvas-API konzentriert sich hauptsächlich auf 2D-Grafiken. Die WebGL-API, die auch das Canvas-Element verwendet, zeichnet hardwarebeschleunigte 2D- und 3D-Grafiken.

Wie verwendet ScheduleJS es?

Sobald Sie Ihre Aktivitäten auf der Leinwand gezeichnet haben, besteht die einzige Möglichkeit, sie zu ändern, darin, sie zu bereinigen und erneut mit dem Zeichnen zu beginnen.

Unter der Haube implementiert ScheduleJS mehrere Tools, um dieses Verhalten im Kontext einer Planungsanwendung zu bewältigen. Diese APIs sind manchmal dem Entwickler zugänglich und manchmal arbeiten sie im Hintergrund, damit sich der Entwickler auf die Kernfunktionen der Anwendung konzentrieren kann, wie zum Beispiel die folgenden:

• Die System Layers API verwaltet aufeinanderfolgende Zeichnungen und Stapelreihenfolge.
• Die Viewport-API optimiert das Rendering und die Navigation.
• Die Renderer-API definiert, wie Aktivitäten und Ebenen gezeichnet werden.
• Die Redraw-API kann nach Belieben aufgerufen werden, um Neuzeichnungen, Operationen an den Zeilen usw. auszulösen …

Das wichtigste Element für den Entwickler in dieser Architektur ist die ScheduleJS Renderer API. Renderer verwenden überschreibbare Funktionen, die es dem Entwickler ermöglichen, seine oder ihre einzigartige Art und Weise zum Zeichnen bestimmter Teile der Anwendung zu erstellen:

• Der Hintergrund
• Das Gitter
• Die Aktivitäten
• Die Aktivitätslinks
• Die Drag-and-Drop-Ebene
• Und alle weiteren Systemebenen

Obwohl dies für manche Leute kompliziert erscheinen mag, ist es ein Workflow, an den sich Entwickler schnell gewöhnen werden. Die Flexibilität der Renderer-Architektur und ihre durchdachte Implementierung ermöglichen endlose Design- und Interaktionsszenarien.

Animieren Ihrer ScheduleJS-Aktivitäten

Um Ihre Leinwand zu animieren, müssen Sie Ihre Animation in Frames aufteilen und dem Renderer mitteilen, wie er jeden Frame zeichnen soll. Die wichtigste Voraussetzung für die Erstellung einer einfachen linearen Animation ist der Zeitpunkt, zu dem die Animation gestartet wurde. Wenn wir jede Aktivität einzeln animieren möchten, ist die Aktivitätsdatenstruktur ein guter Ort zum Speichern dieser Informationen.

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

Lassen Sie uns einen einfachen animierten Renderer erstellen, um jeden Frame basierend auf dem Animationsfortschritt zu zeichnen. Diese einfache Breitenanimation animiert unsere Aktivität bei der Erstellung (von 0 % Breite bis zur vollen Breite).

// 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);
  }

Dieses Beispiel konzentriert sich auf den Code, der zum Ausführen der Animation erforderlich ist. Wie Sie sehen, haben wir ein Verhältnis (von 0 bis 1) erstellt, das die Dauer unserer Animation beschreibt, und multiplizieren einfach die Breite mit diesem Verhältnis. Dadurch wird die Aktivitätsbreite in einer flüssigen 250-ms-Animation erweitert (siehe unten).

Mit dem gleichen Prinzip kann noch viel mehr getan werden, da jede Zeichenebene in ScheduleJS die Renderer-Architektur nutzt und ähnliche Zeichenmethoden implementiert. Darüber hinaus kann mit vielen verschiedenen Ansätzen das gleiche Ergebnis erzielt werden. Unabhängig davon, welche Grafikanimation Sie erstellen möchten, können Sie mit den ScheduleJS-Renderern das Benutzererlebnis auf Pixelebene entwerfen und anpassen.

Kontaktieren Sie uns gerne, wenn Sie UX/UI-Herausforderungen oder Ideen für ScheduleJS haben!

Das obige ist der detaillierte Inhalt vonZeichnen von Animationen in ScheduleJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!