Melukis animasi dalam ScheduleJS

ScheduleJS menggunakan enjin pemaparan Kanvas HTML untuk melukis grid, aktiviti, lapisan tambahan dan pautan. Artikel ini menerangkan cara mereka bentuk animasi pemaparan ScheduleJS yang mudah menggunakan API Kanvas HTML

Beberapa perkataan pada HTML Canvas

Pernahkah anda menggunakan teknologi Kanvas sebelum ini? Elemen kanvas ialah bekas HTML yang digunakan untuk melukis secara pengaturcaraan menggunakan JavaScript pada kos yang sangat rendah untuk penyemak imbas.

Ciri paling ketara bagi elemen kanvas ialah kemungkinannya tidak berkesudahan dari segi reka bentuk dan interaksi. Satu-satunya had kepada apa yang ada pada skrin ialah imaginasi kita.

Jika anda ingin melilitkan kepala anda pada elemen kanvas, anda boleh membandingkannya dengan kertas lukisan kosong.

Menurut dokumentasi web MDN:

MDN: API Kanvas menyediakan cara untuk melukis grafik melalui JavaScript dan elemen kanvas HTML. Antara lain, ia boleh digunakan untuk animasi, grafik permainan, visualisasi data, manipulasi foto dan pemprosesan video masa nyata.

API Kanvas sebahagian besarnya memfokuskan pada grafik 2D. API WebGL, yang turut menggunakan elemen kanvas, melukis grafik 2D dan 3D dipercepatkan perkakasan.

Bagaimanakah ScheduleJS menggunakannya?

Setelah anda melukis aktiviti anda di atas kanvas, satu-satunya cara untuk mengubahnya adalah dengan membersihkannya dan mula melukis semula.

Di bawah hud, ScheduleJS melaksanakan berbilang alatan untuk mengendalikan tingkah laku ini dalam konteks aplikasi penjadualan. API ini kadangkala terdedah kepada pembangun dan kadangkala ia berfungsi secara senyap untuk membenarkan pembangun menumpukan pada ciri teras aplikasi, seperti berikut:

• API Lapisan Sistem mengendalikan lukisan berturut-turut dan susunan susunan.
• API Viewport mengoptimumkan pemaparan dan navigasi.
• API Renderer mentakrifkan cara aktiviti dan lapisan dilukis.
• API Redraw boleh dipanggil sesuka hati untuk mencetuskan lukisan semula, operasi pada baris, dll…

Item paling penting untuk pembangun dalam seni bina ini ialah ScheduleJS Renderer API. Renderer menggunakan fungsi boleh ganti yang membolehkan pembangun mencipta cara uniknya untuk melukis bahagian tertentu aplikasi:

• Latar Belakang
• Grid
• Aktiviti
• Pautan Aktiviti
• Lapisan Seret dan Lepaskan
• Dan setiap Lapisan Sistem tambahan

Walaupun ini mungkin kelihatan rumit kepada sesetengah orang, ia adalah aliran kerja yang pembangun akan terbiasa dengan cepat. Fleksibiliti seni bina Renderer dan pelaksanaan yang difikirkan dengan baik membolehkan reka bentuk dan senario interaksi yang tidak berkesudahan.

Menghidupkan aktiviti ScheduleJS anda

Untuk menganimasikan Kanvas anda, anda perlu memecahkan animasi anda dalam bingkai dan memberitahu pemapar cara melukis setiap bingkai. Bahan utama yang diperlukan untuk mencipta animasi linear mudah ialah masa di mana animasi bermula. Jika kita ingin menghidupkan setiap aktiviti sendiri, tempat yang baik untuk menyimpan maklumat ini ialah struktur data aktiviti.

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

Mari kita cipta pemapar animasi ringkas untuk melukis setiap bingkai berdasarkan perkembangan animasi. Animasi lebar mudah ini akan menghidupkan aktiviti kami pada penciptaan (daripada lebar 0% kepada lebar penuh).

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

Contoh ini memfokuskan pada kod yang diperlukan untuk menjalankan animasi. Seperti yang anda lihat, kami mencipta nisbah (dari 0 hingga 1) yang menerangkan tempoh animasi kami dan kami hanya mendarabkan lebar dengan nisbah ini. Akibatnya, lebar aktiviti akan berkembang dalam animasi 250ms yang lancar (lihat di bawah).

Lebih banyak lagi boleh dilakukan menggunakan prinsip yang sama kerana setiap lapisan lukisan dalam ScheduleJS menggunakan seni bina pemapar dan melaksanakan kaedah lukisan yang serupa. Selain itu, hasil yang sama boleh dicapai dengan menggunakan pelbagai pendekatan. Bagaimanapun, tidak kira apa animasi grafik yang anda ingin bina, pemapar ScheduleJS akan membenarkan anda mereka bentuk dan menyesuaikan pengalaman pengguna pada tahap piksel.

Sila hubungi kami jika anda mempunyai sebarang cabaran atau idea UX/UI untuk ScheduleJS!

Atas ialah kandungan terperinci Melukis animasi dalam ScheduleJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!