Kesan Adalah Laman Web

Kesan dalam SignalRGB, dikenali sebagai Lightscripts, pada dasarnya adalah laman web yang berinteraksi dengan API SignalRGB, dan ia mesti mematuhi beberapa peraturan mudah untuk berfungsi dengan betul. Setiap Lightscript memerlukan tiga tag HTML yang penting: <head>, <body>, dan <script>.

<head>

Bahagian ini harus mengandungi sebarang tag <meta> yang diperlukan. Seperti yang diterangkan dalam bahagian “Rujukan API”, tag-tag ini boleh mencipta medan input pengguna (seperti gelangsar hue, pemilih nombor, dll.) atau mengakses API SignalRGB untuk mengambil input visual daripada aplikasi utama Anda. Selain itu, tag <title> dalam bahagian ini akan memberikan label kepada kesan Anda dalam aplikasi Signal.

Mari kita kembali semula kepada contoh sebelumnya untuk pemahaman yang lebih jelas:

<head>
    <title>Hue Cycle</title>
    <meta description="Stock hue cycle."/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
</head>

Pengepala ini mengandungi empat tag: satu tag <title>, dan tiga tag <meta>, yang meliputi deskripsi, penerbit, dan gelangsar nombor asas. Walaupun pengepala kesan statik biasanya kecil, kesan yang bertindak balas terhadap tindakan pada skrin mungkin melibatkan berdozen-dozen meter, masing-masing dengan pelbagai tetapan resolusi. Adalah penting untuk kekal teratur dan mengikuti konvensyen penamaan yang baik.

<head>

<body>

Badan mengandungi hanya satu elemen — tag <canvas>. Atribut penting untuk tag ini adalah id, digunakan untuk mengambil kanvas dalam skrip, dan width serta height. Dimensi standard untuk SignalRGB adalah 320px untuk lebar dan 200px untuk tinggi.

<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>

<body>

<script>

Tag inilah tempat keajaiban berlaku. Terdapat tiga bahagian asas dalam skrip ini, bersama dua fungsi yang sepatutnya dianggap STANDARD untuk pembangun Lightscript: update dan window.requestAnimationFrame.

Pengisytiharan Pemboleh Ubah

Semua pemboleh ubah bertakuk-skrip harus diisytiharkan bersama untuk memudahkan proses pembangunan Anda. Pada masa hadapan, ini juga akan termasuk pengisytiharan meter, tetapi buat masa ini, kita mempunyai pilihan yang mudah.

var c: Ini digunakan untuk mengambil tag kanvas dari sebelumnya.
var ctx: Konteks 2D elemen kanvas, iaitu kawasan yang boleh diedit untuk kesan Anda.
height, width dan hue: Ini diisytiharkan di sini untuk memudahkan proses.

Panggilan Kemaskini Awal

Di bahagian bawah blok kod, saya merujuk window.requestAnimationFrame(update). “Update” adalah nama fungsi yang mengendalikan animasi secara khusus. Keadaan yang dikemas kini dalam setiap bingkai mencipta ilusi pergerakan bagi penonton.

Kaedah yang digunakan di sini adalah penting: Memandangkan setiap operasi dalam fungsi kemaskini Anda mengambil sedikit masa untuk dilaksanakan, memanggil update() secara langsung boleh menyebabkan kelewatan dalam animasi. Sebagai contoh, panggilan balik pertama mungkin berfikir 100ms telah berlalu, yang seterusnya 110ms, dan seterusnya.

Dengan menggunakan window.requestAnimationFrame, cap masa semasa dihantar ke fungsi panggilan balik dan panggilan balik bersarangnya, mengekalkan keadaan animasi walaupun terdapat jurang pelaksanaan yang kecil.

Ringkasnya, gunakan kaedah window.requestAnimationFrame(callback) untuk mengemas kini animasi Anda!

Fungsi Kemaskini

Fungsi ini adalah inti kepada Lightscript yang berfungsi dan perlu semudah dan seringkas yang mungkin kerana ia berjalan setiap bingkai. Selepas muatan skrip awal dan panggilan fungsi, update akan terus berjalan melalui panggilan window.requestAnimationFrame dalamannya.

Dalam contoh ini, setiap bingkai melakukan empat operasi utama:

Tetapkan gaya isian kanvas dengan ctx.fillStyle. Ini boleh berupa warna, corak, atau kecerunan, dan akan berterusan sehingga ia ditimpa oleh panggilan ctx.fillStyle seterusnya.
Cipta segi empat tepat (dengan gaya isian yang ditetapkan sebelum ini) dengan ctx.fillRect(x, y, width, height). Dalam kes ini segi empat tepat mewakili keseluruhan kanvas.
Ulangkan hue dengan speed, pemboleh ubah input pengguna yang terletak dalam pengepala.
Ikat hue kepada julat 0-360 supaya sesuai dengan standard HSL (hue, saturation, lightness).

<script>
    // Variable Declarations -------------------------
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;

    // Update function --------------------------------
    function update()
    {
      // 1
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
      // 2
      ctx.fillRect(0, 0, width , height);
      // 3
      hue+=(speed / 4);
      // 4
      if (hue > 360) { hue = hue % 360; }
      // Re-call the function
      window.requestAnimationFrame(update);
    }

    // Initial update call ----------------------------
    window.requestAnimationFrame(update);
</script>

Corak umum ini (tetapkan isian, lukis bentuk, edit pemboleh ubah) adalah standard untuk animasi kanvas.

Jika warnanya salah, Anda terlepas isian gaya.
Jika bentuknya salah, Anda terlepas isian bentuk.
Jika tiada perubahan dari masa ke masa, Anda tidak mengedit pemboleh ubah Anda.

Untuk maklumat lanjut dan nasihat penyelesaian masalah, lihat halaman seterusnya kami tentang HTML5 + JS.

<script>