iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

Rive 的理論與實務 系列

Rive 是一個 JavaScript 的動畫 library,類似 Lottie 但有更多功能,我會分享一些 Rive 的理論基礎與實務經驗。

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day 11] Rive Events

Rive Events 是另外一個前端與 Rive 溝通的方式,好吧嚴格講起來他不是前端帶參數給 Rive,而是反過來讓 Rive 可以 emit event...

2024-09-13 ‧ 由 ywchang2404 分享
DAY 12

[Day 12] 實務建議:盡量拆開程式碼

如同前一天所說的,Rive 本身的語法都不難,但很多設計模式上的問題,要實務上有遇過才會有一些想法,例如今天要講的是,關於程式碼怎麼拆分的部分。以下會用 Vue...

2024-09-14 ‧ 由 ywchang2404 分享
DAY 13

[Day 13] 實務建議:盡量整理成物件導向

昨天提到了要盡量拆開程式碼,把程式碼拆成商業邏輯與 Rive 邏輯,那商業邏輯或 Rive 邏輯內部之間又要怎麼拆,拆完要怎麼組合?就是今天要討論的問題,也就是...

2024-09-15 ‧ 由 ywchang2404 分享
DAY 14

[Day 14] 實務建議:多用 store

在 Day 12 我們提到了把商業邏輯跟 Rive 邏輯拆開這件事,有人可能有注意到這一段。 // usePartA.ts import usePartABu...

2024-09-16 ‧ 由 ywchang2404 分享
DAY 15

[Day 15] Rive 的實作原理

前三天的內容比較硬一點,是一些我們實務開發的心得,為了舒緩一下節奏,今天會稍微回來解釋一下 Rive 的實作原理,為接下來更進階的內容作準備。 Rive 本質上...

2024-09-17 ‧ 由 ywchang2404 分享
DAY 16

[Day 16] Rive 的防抄襲措施

昨天我們提到了 Rive 的操作空間比想像中大,以及我們跟官方許願過防抄襲功能的事,今天就稍微提一下我們自己的防抄襲方案。我是覺得這還蠻奇淫巧技的,一定不是最好...

2024-09-18 ‧ 由 ywchang2404 分享
DAY 17

[Day 17] 實務建議:怎麼跟設計師溝通

這部分的內容可能在前幾天有稍微提到,但我覺得還是有必要獨立出來特別強調一下。畢竟 Rive 本質上是請設計師多負擔了一點工程師的工作,以提升團隊整體的開發效率,...

2024-09-19 ‧ 由 ywchang2404 分享
DAY 18

[Day 18] 進階問題:Render loop

經過前幾天的討論,我們應該對 Rive 的實作有基本的概念了。其實 Rive 除了大家目前看到的 API 以外,還有一組 Low-level API,讓我們能更...

2024-09-20 ‧ 由 ywchang2404 分享
DAY 19

[Day 19] 進階問題:Low-level APIsⅠ

在正式開始介紹 Rive Low-level API 之前,我們要先名詞解釋一下,目前我們看到的 Rive 語法 aka Rive 官方提供給我們使用的 API...

2024-09-21 ‧ 由 ywchang2404 分享
DAY 20

[Day 20] 進階問題:Low-level APIs Ⅱ

前一天我們提到了,Low-level API 裡面的 State Machine, Rive Text, Rive Events 的語法,也跟 High-lev...

2024-09-22 ‧ 由 ywchang2404 分享