iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

Rive 的一些進階主題 系列

我們最近也在用 Rive,累積了一些實務經驗與心得,這幾年 Rive 也有出一些新的東西,趁這次鐵人賽一起分享給大家。

參賽天數 27 天 | 共 27 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day 01] 前言

Hi 大家好,2026 年 Rive 也多了一些新功能,沒想到好像真的有些人對這個冷門的技術有興趣,三不五時都會被問到一點,所以就來寫鐵人賽吧。 我們這幾年用...

2026-09-15 ‧ 由 rayrayyyyy0507 分享
DAY 2

[Day 02] Rive 的簡單複習

像昨天說的那樣,這次鐵人賽假設大家對 Rive 有基本的認識,今天也幫大家快速複習一下 Rive。 Rive 的使用情境 Rive 是一個 JavaScript...

2026-09-16 ‧ 由 rayrayyyyy0507 分享
DAY 3

[Day 03] Data Binding - 簡介

昨天快速複習了 Rive 的使用情境,今天來介紹這次系列會用到的 Data Binding,看看前端的資料怎麼跟 Rive 裡的畫面接起來。 2024 年的系列...

2026-09-17 ‧ 由 rayrayyyyy0507 分享
DAY 4

[Day 04] Data Binding - 程式碼 demo

昨天介紹了 Data Binding 的基本概念,今天直接看程式碼,示範怎麼把玩家姓名與分數傳進 Rive,以及資料改變時怎麼更新畫面。 以下使用 High-l...

2026-09-18 ‧ 由 rayrayyyyy0507 分享
DAY 5

[Day 05] Data Binding - 基本 API

昨天透過玩家卡片 demo,示範了怎麼取得欄位與修改資料。其中用了 autoBind: true,讓 runtime 自動完成綁定。今天把這段流程拆開,看看取得...

2026-09-19 ‧ 由 rayrayyyyy0507 分享
DAY 6

[Day 06] Data Binding - number, boolean, trigger

昨天介紹了取得 View Model、建立 Instance 與綁定的基本 API,今天接著看 number、boolean、trigger,分別用來更新分數、...

2026-09-20 ‧ 由 rayrayyyyy0507 分享
DAY 7

[Day 07] Data Binding - string, color, enum, image

昨天介紹了 number、boolean、trigger,今天繼續替玩家卡片加上姓名、主題色、等級與頭像,也補上其他還沒完整介紹的型別。 以下沿用 High-l...

2026-09-21 ‧ 由 rayrayyyyy0507 分享
DAY 8

[Day 08] 常見問題 1:Rive 可以拿來做 UI 嗎?

很多人對 Rive 的第一印象是:「這是一個拿來取代 Lottie 的動效工具吧?」 但如果有持續關注這兩年的更新,就會發現 Rive 想做的事情早就不只是動畫...

2026-09-22 ‧ 由 rayrayyyyy0507 分享
DAY 9

[Day 09] 常見問題 2:Rive 有沒有效能的問題?

這個問題不知道為什麼,非常非常非常常被問到,如果只是要從理論上、技術面上來說的話,答案也非常簡單:沒有。當然實務上來說,這是非常低情商的回答,講出去被打不要怪我...

2026-09-23 ‧ 由 rayrayyyyy0507 分享
DAY 10

[Day 10] Rive 做 RWD 的方法 1:從前端做等比縮放

許多人第一次在網頁上使用 Rive 時,都會遇到同樣的疑問:Rive 要怎麼做 RWD? 不同於傳統 HTML/CSS 可以輕鬆使用 Flex、Grid 或 M...

2026-09-24 ‧ 由 rayrayyyyy0507 分享