Day 08 成功初始化 Rive 後，接下來準備帶參數給動畫，也就是 State Machine 的部分。

什麼是 State Machine？

State Machine 的定義可以參考 Wiki，但其實就跟 Pinia 或 Redux 的 state 一樣，我們用 state 表示 view，同時 view 可以觸發 action，action 改變 state，state 再改變 view。

Rive 的 state machine 本質上就是這個而已，簡單來說：

1. 一個 Rive 有一個 State Machine
2. 其中有 trigger, number, boolean 三種 state，Rive 把他們叫做 state machine input
3. 這三種 state 會對應到動畫 view 裡的某個狀態
4. 有三種不同的 action API 可以改變這些 state，達到改變動畫的效果

理解這個概念之後，剩下就只是語法細節的問題了。

不過嚴格講起來 trigger 不太像是 state，除非你要說 JavaScript 的 function 也是 first-class citizen 所以也可以是一種 state……其實好像也不是不行啦。總之在理解概念的時候，我個人習慣用一些修辭，難免會忽略一些細節方便理解，我會盡可能的標示清楚。

State Machine 的語法

語法其實也不難，對有一些前端經驗的工程師來說，應該非常簡單。所以跟昨天一樣，可以直接進去 CodeSandbox 裡面自己追比較快。

根據剛剛的討論，我們知道操作動畫本質上就是透過 action 改變 state 改變 view，所以我們要先拿到 action。

1. 在初始化 Rive 時，要先寫好 state machine 的名字。這個名字非常重要，要請 .riv 檔的設計師給你，沒有寫正確的話會無法運作。
   
2. 常見的坑在於命名，State Machine 1 是 Rive Editor 預設的命名，很多設計師不一定會注意到這一點，他們可能跟你說喔叫做 statemachine1 或是 state machine 1，或是用一些其他奇怪的名字之類的，所以我才會在 Day 06 說命名很重要。
3. 接著只要把 new 出來的 Rive 物件存起來（假設變數名稱叫做 r 好了），就可以透過 r.stateMachineInputs("State Machine 1") 拿到 state machine inputs
4. 他是一個陣列，所以要透過 [] 去拿對應的 input，這部分要自己印出來找你要的 input。
   
5. 如同前面所說的，input 有 trigger, number, boolean 三種，要改變他們的話，分別要這樣寫
   

所以整段程式碼大概長這樣，每點一次畫面上的 punch 按鈕，就可以打一個小拳拳。

小結

以上是 State Machine 的基本語法，其實語法跟概念都不難，碰到的問題比較多是在設計模式上。所以接下來幾天會先講另外兩個跟 Rive 溝通的方式，也就是 text 跟 events，接下來就會講一些比較進階的，關於設計模式的實務建議。