Dessiner des animations dans ScheduleJS

ScheduleJS utilise le moteur de rendu HTML Canvas pour dessiner la grille, les activités, les couches supplémentaires et les liens. Cet article explique comment concevoir une animation de rendu ScheduleJS simple à l'aide de l'API HTML Canvas

Quelques mots sur HTML Canvas

Avez-vous déjà utilisé la technologie Canvas auparavant ? L'élément canvas est un conteneur HTML utilisé pour dessiner par programmation à l'aide de JavaScript à un coût étonnamment bas pour le navigateur.

La caractéristique la plus importante de l'élément toile est que ses possibilités sont infinies en termes de design et d'interactions. La seule limite à ce qui est à l’écran est notre imagination.

Si vous souhaitez comprendre l'élément de toile, vous pouvez le comparer à un papier à dessin vierge.

D'après la documentation web MDN :

MDN : l'API Canvas fournit un moyen de dessiner des graphiques via JavaScript et l'élément HTML canvas. Entre autres choses, il peut être utilisé pour l'animation, les graphismes de jeux, la visualisation de données, la manipulation de photos et le traitement vidéo en temps réel.

L'API Canvas se concentre en grande partie sur les graphiques 2D. L'API WebGL, qui utilise également l'élément canvas, dessine des graphiques 2D et 3D accélérés par le matériel.

Comment ScheduleJS l’utilise-t-il ?

Une fois que vous avez dessiné vos activités sur la toile, la seule façon de la faire changer est de la nettoyer et de recommencer à dessiner.

Sous le capot, ScheduleJS implémente plusieurs outils pour gérer ce comportement dans le contexte d'une application de planification. Ces API sont parfois exposées au développeur et parfois elles fonctionnent silencieusement pour permettre au développeur de se concentrer sur les fonctionnalités principales de l'application, comme ce qui suit :

• L'API System Layers gère les dessins successifs et l'ordre d'empilement.
• L'API Viewport optimise le rendu et la navigation.
• L'API Renderer définit la manière dont les activités et les calques sont dessinés.
• L'API Redraw peut être appelée à volonté pour déclencher des redessins, des opérations sur les lignes, etc…

L'élément le plus important pour le développeur dans cette architecture est l'API ScheduleJS Renderer. Les moteurs de rendu utilisent des fonctions remplaçables permettant au développeur de créer sa manière unique de dessiner des parties spécifiques de l'application :

• Le contexte
• La Grille
• Les activités
• Les liens d'activités
• Le calque Glisser-Déposer
• Et toutes les couches système supplémentaires

Bien que cela puisse paraître compliqué à certaines personnes, c'est un workflow auquel les développeurs s'habitueront rapidement. La flexibilité de l'architecture Renderer et sa mise en œuvre bien pensée permettent des scénarios de conception et d'interaction infinis.

Animer vos activités ScheduleJS

Pour animer votre Canvas, vous devez décomposer votre animation en images et indiquer au moteur de rendu comment dessiner chaque image. Le principal ingrédient requis pour créer une animation linéaire simple est l’heure à laquelle l’animation a commencé. Si nous voulons animer chaque activité seule, la structure des données d'activité est un bon endroit pour stocker ces informations.

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

Créons un moteur de rendu animé simple pour dessiner chaque image en fonction de la progression de l'animation. Cette animation simple largeur animera notre activité de création (de 0% de largeur à pleine largeur).

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

Cet exemple se concentre sur le code requis pour exécuter l'animation. Comme vous pouvez le constater, nous avons créé un ratio (de 0 à 1) décrivant la durée de notre animation et nous multiplions simplement la largeur par ce ratio. En conséquence, la largeur de l'activité s'étendra dans une animation fluide de 250 ms (voir ci-dessous).

Beaucoup plus peut être fait en utilisant le même principe, car chaque couche de dessin dans ScheduleJS utilise l'architecture de rendu et implémente des méthodes de dessin similaires. De plus, le même résultat peut être obtenu en utilisant de nombreuses approches différentes. Quoi qu'il en soit, quelle que soit l'animation graphique que vous souhaitez créer, les moteurs de rendu ScheduleJS vous permettront de concevoir et de personnaliser l'expérience utilisateur au niveau des pixels.

N'hésitez pas à nous contacter si vous avez des défis UX/UI ou des idées pour ScheduleJS !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!