Chuyển tới nội dung chính

State Machine

State Machine là gì?​

State Machine kết nối các animation của bạn và định nghĩa các quy tắc để chuyển đổi giữa chúng. Hãy hình dung nó như một bộ điều khiển đèn giao thông: nó biết đèn nào đang bật, theo dõi tín hiệu phù hợp, và chuyển sang đèn tiếp theo đúng lúc.

State Machine là cầu nối giữa thiết kế và lập trình. Designer kiểm soát logic một cách trực quan. Developer triển khai nó với lượng code tối thiểu.

Dùng State Machine để xây dựng các đồ họa tương tác — nút bấm, nhân vật, thành phần giao diện — phản hồi theo thao tác người dùng, thay đổi dữ liệu và các sự kiện.

Mỗi artboard mặc định có một State Machine. Tạo thêm bằng cách nhấn + trong Danh sách Animation và chọn State Machine.

Các thành phần của State Machine​

State Machine có bốn phần chính:

  • Graph — Màn hình canvas trực quan nơi bạn thêm state và vẽ transition.
  • States — Các animation timeline đại diện cho một trạng thái (ví dụ: Idle, Hovered, Clicked).
  • Transitions — Các mũi tên kết nối các state. Chúng xác định khi nào và cách thức machine chuyển từ state này sang state khác.
  • Layers — Nhiều layer cho phép các phần khác nhau của đồ họa chạy logic state độc lập cùng một lúc.

Graph​

Graph thay thế Timeline khi một State Machine được chọn. Đây là nơi bạn sắp xếp các state và kết nối chúng bằng các transition.

State Machine Graph

States​

Một state chứa một animation timeline. Nó đại diện cho một trạng thái mà đồ họa của bạn có thể ở trong đó.

Ví dụ, một nút bấm có thể có ba state:

  • Idle — Nút ở trạng thái bình thường
  • Hovered — Nút khi con trỏ di chuyển qua
  • Clicked — Nút khi được nhấn

States example

Transitions​

Transition kết nối các state. Chúng tạo thành bản đồ mà State Machine đi theo để chuyển từ animation này sang animation tiếp theo.

Mỗi transition có các điều kiện. Ví dụ: "chuyển sang Hovered khi con trỏ đi vào đồ họa."

Creating transitions

Bước tiếp theo​