Lewati ke konten utama

State Machine

Apa Itu State Machine?​

State Machine menghubungkan animasi-animasi Anda dan mendefinisikan aturan perpindahan di antara mereka. Bayangkan seperti pengontrol lampu lalu lintas: ia mengetahui lampu mana yang sedang menyala, memantau sinyal yang tepat, dan beralih ke lampu berikutnya pada waktu yang tepat.

State Machine menjembatani desain dan pengembangan. Desainer mengontrol logika secara visual. Developer mengimplementasikannya dengan kode yang minimal.

Gunakan State Machine untuk membangun grafik interaktif — tombol, karakter, komponen UI — yang merespons input pengguna, perubahan data, dan event.

Setiap artboard mendapatkan satu State Machine secara default. Buat lebih banyak dengan mengklik + di Daftar Animasi dan memilih State Machine.

Anatomi State Machine​

State Machine memiliki empat bagian utama:

  • Graph — Kanvas visual tempat Anda menambahkan state dan menggambar transisi.
  • States — Animasi timeline yang merepresentasikan suatu kondisi (misalnya Idle, Hovered, Clicked).
  • Transitions — Panah yang menghubungkan state. Mereka menentukan kapan dan bagaimana mesin berpindah dari satu state ke state lainnya.
  • Layers — Beberapa layer memungkinkan bagian-bagian berbeda dari grafik menjalankan logika state secara independen secara bersamaan.

Graph​

Graph menggantikan Timeline ketika State Machine dipilih. Di sinilah Anda mengatur state dan menghubungkannya dengan transisi.

State Machine Graph

States​

Sebuah state menyimpan animasi timeline. Ini merepresentasikan satu kondisi yang dapat dimiliki grafik Anda.

Misalnya, sebuah tombol mungkin memiliki tiga state:

  • Idle — Tombol dalam kondisi diam
  • Hovered — Tombol ketika kursor berada di atasnya
  • Clicked — Tombol ketika ditekan

Contoh States

Transitions​

Transitions menghubungkan state. Mereka membentuk peta yang diikuti State Machine untuk berpindah dari satu animasi ke animasi berikutnya.

Setiap transisi memiliki kondisi. Misalnya: "pindah ke Hovered ketika pointer masuk ke dalam grafik."

Membuat transisi

Langkah Berikutnya​