ScheduleJSでアニメーションを描画する

ScheduleJS は、HTML Canvas レンダリング エンジンを使用して、グリッド、アクティビティ、追加のレイヤー、リンクを描画します。この記事では、HTML Canvas API

を使用して単純な ScheduleJS レンダリング アニメーションをデザインする方法について説明します。

HTML Canvas についての一言

これまでに Canvas テクノロジーを使用したことがありますか? Canvas 要素は、ブラウザーにとって驚くほど低コストで JavaScript を使用してプログラムで描画するために使用される HTML コンテナーです。

キャンバス要素の最も重要な特徴は、デザインとインタラクションの点でその可能性が無限であることです。画面に表示されるものに対する唯一の制限は、私たちの想像力です。

キャンバス要素をよく理解したい場合は、それを白紙の画用紙と比較してください。

MDN Web ドキュメントによると:

MDN: Canvas API は、JavaScript および HTML キャンバス要素を介してグラフィックを描画する手段を提供します。とりわけ、アニメーション、ゲーム グラフィックス、データ視覚化、写真操作、リアルタイム ビデオ処理に使用できます。

Canvas API は主に 2D グラフィックスに焦点を当てています。 WebGL API も Canvas 要素を使用し、ハードウェア アクセラレーションによる 2D および 3D グラフィックスを描画します。

ScheduleJS はそれをどのように使用しますか?

キャンバスにアクティビティを描画したら、それを変更する唯一の方法は、キャンバスをクリーンアップして再度描画を開始することです。

内部では、ScheduleJS はスケジュール アプリケーションのコンテキストでこの動作を処理する複数のツールを実装しています。これらの API は開発者に公開される場合もあれば、開発者が次のようなアプリケーションのコア機能に集中できるようにサイレントに動作する場合もあります。

• システム レイヤー API は、連続した描画と積み重ね順序を処理します。
• Viewport API はレンダリングとナビゲーションを最適化します。
• Renderer API は、アクティビティとレイヤーの描画方法を定義します。
• 再描画 API を自由に呼び出して、再描画や行の操作などをトリガーできます…

このアーキテクチャの開発者にとって最も重要な項目は、ScheduleJS レンダラー API です。レンダラーはオーバーライド可能な関数を使用して、開発者がアプリケーションの特定の部分を描画する独自の方法を作成できるようにします。

• 背景
• グリッド
• アクティビティ
• アクティビティのリンク
• ドラッグ アンド ドロップ レイヤー
• および追加のすべてのシステム層

これは一部の人には複雑に見えるかもしれませんが、開発者はすぐに慣れるワークフローです。レンダラー アーキテクチャの柔軟性とその綿密に検討された実装により、無限の設計と対話シナリオが可能になります。

ScheduleJS アクティビティをアニメーション化する

キャンバスをアニメーション化するには、アニメーションをフレームに分割し、各フレームの描画方法をレンダラーに指示する必要があります。単純なリニア アニメーションを作成するために必要な主な要素は、アニメーションの開始時間です。すべてのアクティビティを独自にアニメーション化したい場合、この情報を保存するのに適した場所はアクティビティ データ構造です。

// 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) を作成し、幅にこの比率を単純に乗算します。その結果、スムーズな 250ms アニメーションでアクティビティの幅が広がります (下記参照)。

ScheduleJS のすべての描画レイヤーがレンダラー アーキテクチャを使用し、同様の描画メソッドを実装しているため、同じ原理を使用してさらに多くのことを行うことができます。さらに、さまざまなアプローチを使用して同じ結果を達成できます。とにかく、どのようなグラフィック アニメーションを構築したい場合でも、ScheduleJS レンダラーを使用すると、ピクセル レベルでユーザー エクスペリエンスを設計およびカスタマイズできます。

UX/UI の課題や ScheduleJS に関するアイデアがありましたら、お気軽にお問い合わせください!

以上がScheduleJSでアニメーションを描画するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。