Hiệu ứng là các trang web

Các hiệu ứng trong SignalRGB, được gọi là Lightscripts, về cơ bản là các trang web tương tác với SignalRGB API, và phải tuân theo một số quy tắc đơn giản để hoạt động đúng cách. Mỗi Lightscript yêu cầu ba thẻ HTML chính: <head>, <body> và <script>.

<head>

Phần này phải chứa tất cả các thẻ <meta> cần thiết. Như được giải thích trong phần “API reference”, các thẻ này có thể tạo các trường nhập liệu của người dùng (như thanh trượt sắc độ, bộ chọn số, v.v.) hoặc truy cập SignalRGB API để lấy đầu vào hình ảnh từ ứng dụng chính. Ngoài ra, thẻ <title> trong phần này sẽ gắn nhãn hiệu ứng của bạn trong ứng dụng Signal.

Hãy quay lại ví dụ trước để hiểu rõ hơn:

<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>

Phần đầu này chứa bốn thẻ: một thẻ <title> và ba thẻ <meta>, bao gồm mô tả, nhà xuất bản và thanh trượt số cơ bản. Trong khi phần đầu của các hiệu ứng tĩnh thường nhỏ, các hiệu ứng phản ứng với các hành động trên màn hình có thể bao gồm hàng chục meter, mỗi meter với các cài đặt độ phân giải khác nhau. Điều quan trọng là phải có tổ chức và tuân theo các quy ước đặt tên tốt.

<head>

<body>

Body chỉ chứa một phần tử — thẻ <canvas>. Các thuộc tính quan trọng cho thẻ này là id, được sử dụng để lấy canvas trong script, và width cùng height. Kích thước tiêu chuẩn cho SignalRGB là 320px cho chiều rộng và 200px cho chiều cao.

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

<body>

<script>

Đây là nơi phép màu xảy ra. Có ba phần cơ bản của script này, cùng với hai hàm nên được coi là TIÊU CHUẨN cho các nhà phát triển Lightscript: update và window.requestAnimationFrame.

Khai báo biến

Tất cả các biến có phạm vi script nên được khai báo cùng nhau để quá trình phát triển dễ dàng hơn. Trong tương lai, điều này cũng sẽ bao gồm các khai báo meter, nhưng hiện tại chúng ta có các tùy chọn đơn giản.

var c: Được sử dụng để lấy thẻ canvas từ trước.
var ctx: Bối cảnh 2D của phần tử canvas, tức là vùng có thể chỉnh sửa cho hiệu ứng của bạn.
height, width và hue: Chúng được khai báo ở đây để thuận tiện.

Lời gọi cập nhật ban đầu

Ở dưới cùng của khối code, tôi tham chiếu window.requestAnimationFrame(update). “Update” là tên của hàm quản lý cụ thể animation. Trạng thái được cập nhật trong mỗi khung tạo ra ảo giác chuyển động cho người xem.

Phương thức được sử dụng ở đây rất quan trọng: Vì mỗi thao tác trong hàm update của bạn mất một ít thời gian để thực thi, việc gọi trực tiếp update() có thể gây ra độ trễ trong animation. Ví dụ: callback đầu tiên có thể nghĩ rằng đã qua 100ms, tiếp theo là 110ms, v.v.

Bằng cách sử dụng window.requestAnimationFrame, dấu thời gian hiện tại được truyền vào hàm callback và các callback lồng nhau của nó, duy trì trạng thái animation bất chấp các khoảng trống nhỏ trong quá trình thực thi.

Nói ngắn gọn, hãy sử dụng phương thức window.requestAnimationFrame(callback) để cập nhật các animation!

Hàm Update

Hàm này là trái tim của Lightscript hoạt động và nên được giữ đơn giản và súc tích nhất có thể vì nó thực thi mỗi khung. Sau khi tải script ban đầu và gọi hàm, update sẽ tiếp tục thực thi thông qua lời gọi window.requestAnimationFrame bên trong.

Trong ví dụ này, mỗi khung thực hiện bốn thao tác chính:

Đặt kiểu fill của canvas với ctx.fillStyle. Đây có thể là màu sắc, mẫu hoặc gradient, và sẽ tồn tại cho đến khi bị ghi đè bởi lời gọi ctx.fillStyle tiếp theo.
Tạo một hình chữ nhật (với kiểu fill đã đặt trước đó) với ctx.fillRect(x, y, width, height). Trong trường hợp này hình chữ nhật đại diện cho toàn bộ canvas.
Tăng hue với speed, một biến đầu vào người dùng được tìm thấy trong phần đầu.
Giới hạn hue trong phạm vi 0-360 để phù hợp với tiêu chuẩn 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>

Mẫu chung này (đặt fill, vẽ hình, chỉnh sửa biến) là tiêu chuẩn cho các animation canvas.

Nếu màu sắc sai, bạn đã bỏ lỡ việc đặt kiểu.
Nếu hình dạng sai, bạn đã bỏ lỡ việc vẽ hình.
Nếu không có thay đổi theo thời gian, bạn không chỉnh sửa các biến.

Để biết thêm thông tin và mẹo khắc phục sự cố, xem trang tiếp theo của chúng tôi về HTML5 + JS.

<script>