第一篇聊了 AE 和 Rive 的思維差異：AE 控制時間，Rive 控制狀態。
這篇進入第一個核心概念：State Machine。
State Machine 是什麼？
State Machine 是「狀態的流程圖」。
它很常出現在電腦科學、電子工程等領域。雖然聽起來很技術，但你在生活中早就習以為常。
例子一：車站驗票閘門
想想看車站驗票閘門有幾種狀態？
閘門只有兩個狀態：關閉和打開。
當「刷卡成功」→ 從「關閉」狀態變成「打開」狀態
當「有人通過」→ 從「打開」狀態變成「關閉」狀態
關閉的時候，你再怎麼用力推也沒用。
打開的時候，如果沒有人通過，閘門就不會關閉。
條件沒有滿足，它不會切換。
簡單的例子：車站驗票閘門的狀態長什麼樣子
例子二：自動販賣機
自動販賣機是另一個常見的有趣例子。
自動販賣機的狀態可能包括：等待投幣、等待選擇、出貨中等等。
當「投入足夠金額」→ 從「等待投幣」狀態變成「等待選擇」狀態
當「按下商品按鈕」→ 從「等待選擇」狀態變成「出貨中」狀態
金額不足的時候， 你再怎麼用力按商品按鈕也沒用。
每個狀態切換都有明確的條件，細節就留給你去推敲了！
比較完整的例子：自動販賣機的狀態長什麼樣子（來源）
你有沒有發現，這兩個例子有一個共同的結構？
它們都有幾個固定的狀態，每個狀態有自己的樣子。
系統在任何時刻，都只會待在其中一個狀態。直到某個條件滿足了，才切換到下一個狀態。切換之後，又在新的狀態裡待著。
這個結構，就是 State Machine——一張畫出所有狀態、以及在什麼條件下從一個狀態切換到另一個狀態的流程圖。
這也呼應了上一篇提到的 Rive 的核心概念：「當發生什麼事時，它就做什麼事。」
在 Rive 中，State Machine 也是長得像一張流程圖：
狀態之間的那條切換路徑叫做 Transition，也就是圖中的箭頭。
觸發狀態切換的判斷條件叫做 Condition，也就是剛剛說的「在什麼條件下」。
狀態具體要怎麼做出來？
但在 Rive 裡面，這些狀態具體要怎麼做出來？
我們用一個按鈕動畫的例子來想想看：
這個按鈕有這些不同的情況：
1. 什麼事都沒發生時，按鈕就靜靜待著。
2. 滑鼠移進來時，按鈕變大。
3. 當滑鼠移出時，按鈕恢復原來大小。
4. 按下去之後，按鈕會彈一下。
在 Rive 裡，這些情況都算是狀態——不管是一個固定的樣子，還是一段動畫，都是狀態。
換句話說，狀態可以是靜態的（像情況 1），也可以是動態的（像情況 4）。
（情況 2 和 3 晚點說 😉）
那什麼東西既可以呈現靜態，也可以呈現動態？
答案是 Timeline。
Timeline 裡可以只放一個 keyframe 來呈現靜態的樣子，也可以放多個 keyframe 來呈現一段動態的動畫。
這裡有一個 AE 動畫師初學 Rive 特別容易轉不過來的地方——會把 Timeline 想成 AE 的 Composition，覺得一條 Timeline 就是「一段動畫」。
但在 Rive 裡，Timeline 代表的是「一個狀態」——它定義了這個狀態長什麼樣子。
所以在 Rive 裡看到一條 Timeline，要想的是「這是哪個狀態」，而不是「這是哪段動畫」。
回到按鈕的例子。
我們可以用一個 Timeline 來代表「什麼事都沒發生時，按鈕就靜靜待著」這個狀態，也就是 Idle 狀態。
我們只需要在這個 Timeline 裡放一個 scale = 100% 的 keyframe。
再來，我們可以用另一個 Timeline 來代表「按下去之後，按鈕會彈一下再回來」這個狀態，也就是 Clicked 狀態。
我們在這個 Timeline 裡放一段 scale 回彈的動畫。
最後，我們來處理情況 2 和 3：
2. 滑鼠移進來時，按鈕變大。
3. 當滑鼠移出時，按鈕恢復原來大小。
你可能會想說，我們會需要「按鈕變大」和「按鈕恢復原來大小」這兩個動畫：
第一個 Timeline 裡放一段 scale 從 100% 到 110% 的動畫，對應「按鈕變大」。
第二個 Timeline 裡放一段 scale 從 110% 到 100% 的動畫，對應「按鈕恢復原來大小」。
但其實不必這麼麻煩，因為 Transition 本身就能幫你處理這件事。
剛剛有提到 State Machine 中，狀態之間的那條切換路徑叫做 Transition，也就是圖中的箭頭。
你只要設定 Transition 的 Duration（時間長度）和 Interpolation（easing 數值），Rive 就會自動在兩個狀態之間補間，做出流暢的過渡動畫。
所以，我們其實只需要一個 Timeline 來代表「按鈕要比平常大一點」這個狀態。我們來叫它 Hover 狀態。
Hover 狀態如同 Idle 狀態，是一個靜態的樣子；而不是像 Clicked 狀態，是一段動畫。
我們只需要在這個 Timeline 裡放一個 scale = 110% 的 keyframe。
接著，我們只需要在 Idle 和 Hover 這兩個狀態之間加上 Transition，Rive 就能幫你做出切換狀態時的動畫，也就是「按鈕變大」和「按鈕恢復原來大小」這兩個動畫。
不必再設置多餘的 Timeline 來達成一樣的效果了！
我們來整理一下這個按鈕的所有狀態：
以下是這個按鈕的 State Machine 例子：
P.S. 這裡只示範基本的做法，比較完整的做法會用到「layers」，之後再細講！
每一條 Timeline 代表 State Machine 裡的一個狀態節點，State Machine 就在這些 Timeline 之間切換，這樣就構成了整個互動動畫的邏輯。
但是，光有 State Machine 還不夠，因為 State Machine 自己沒有眼睛和耳朵，去感知外界發生了什麼事。
下一篇，我們會介紹 Listener——負責偵測外界發生了什麼事的角色。