iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

Rive 的理論與實務 系列

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

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

[Day 01] Rive 的基本介紹

Hi,這是我第一次參加鐵人賽,最近公司有幾個專案有很多動畫的需求,又希望能盡可能地減少設計師與工程師的溝通成本,因此設計師主管介紹 Rive 這個 librar...

2024-09-03 ‧ 由 ywchang2404 分享
DAY 2

[Day 02] 對設計師來說,Rive 的優點

首先要說的是,嚴格講起來 Rive 有兩套軟體:Rive Editor & Rive Runtimes,Rive Editor 是給設計師製作動畫用的,...

2024-09-04 ‧ 由 ywchang2404 分享
DAY 3

[Day 03] 對工程師來說,Rive 的優點

Day 02 聊了一下對設計師來說,Rive 有什麼優點,那今天就換個角度,站在工程師的立場,說明 Rive 的好處有哪些。 降低切版成本 首先對工程師來說,也...

2024-09-05 ‧ 由 ywchang2404 分享
DAY 4

[Day 04] Rive 的缺點

前面花了兩三天講了 Rive 的優點,當然它也不是萬能的,還是有一些缺點與做不到的事情。所以如果你有以下的這些需求,那你可能不適合用 Rive。 參數的範圍太大...

2024-09-06 ‧ 由 ywchang2404 分享
DAY 5

[Day 05] Rive vs. 其他動畫技術

前幾天聊到了 Rive 的優缺點,今天會把 Rive 跟其他前端的動畫技術做一個比較,主要有 Lottie、雪碧圖 / GIF / SVG / 影片、Unity...

2024-09-07 ‧ 由 ywchang2404 分享
DAY 6

[Day 06] 對設計師來說,使用 Rive 的注意事項

前幾天討論了 Rive 的優缺點,以及跟其他技術的比較。如果看完這些你決定用 Rive 的話,因為 Rive 必須要設計師們的配合,所以以下是就我們這兩年的實作...

2024-09-08 ‧ 由 ywchang2404 分享
DAY 7

[Day 07] 設計師常見的 Q & A

前幾天聊了 Rive 的基本介紹,Rive 的優缺點與其他動畫技術的比較,以及對設計師來說,使用 Rive 的一些注意事項。最後則是一些我們公司內部在採用 Ri...

2024-09-09 ‧ 由 ywchang2404 分享
DAY 8

[Day 08] Rive 的 Hello World

接下來會開始講解 Rive 的一些語法與應用,首先是一個 Hello World,也就是 Rive 初始化的部分。程式碼對有一些前端經驗的工程師來說應該非常簡單...

2024-09-10 ‧ 由 ywchang2404 分享
DAY 9

[Day 09] State Machines

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

2024-09-11 ‧ 由 ywchang2404 分享
DAY 10

[Day 10] Rive Text

Day 09 講了第一個帶參數給 Rive 的方法 State Machines,State Machine Inputs 有 trigger, number,...

2024-09-12 ‧ 由 ywchang2404 分享