用 Rive 做動畫圖示微互動

本機網頁帶有由 state machine 驅動的互動 Rive 圖示。

網頁動畫 · 20-30 分鐘 · 更新 2026-06-01

第一個成果

Rive 圖示在瀏覽器中對 hover 與點擊播放動畫。

學習 Rive 的設計師

Claude Code, Rive Community 檔案, 瀏覽器

範例成果

本機網頁帶有由 state machine 驅動的互動 Rive 圖示。

Rive 靜止 Hover 點擊

State machine 微互動一個圖示學會回應動作。一個 Rive .riv 檔在本機 canvas 中播放。布林與 trigger 輸入由頁面驅動，讓 hover 與點擊都有清楚回應。 @rive-app/canvas State machine 靜態頁面

01 Hover 輸入游標進入或離開 canvas 時切換布林輸入。

02 點擊 trigger 點擊時 trigger 輸入觸發，圖示先做出反應再回到原狀。