Sang vibe

Menu
Giáo Trình Rive — Thuan N.Kim
Giáo trình cá nhân

Học Rive từ đầu
đến chuyên nghiệp

Được soạn riêng cho Thuan N.Kim · Motion Designer · 8+ năm After Effects

3 Giai đoạn 12 Bài học 6 Mini Project Từ cơ bản → Nâng cao Không cần code
Mục lục
01Rive là gì và tại sao họcCơ bản
02Giao diện & WorkspaceCơ bản
03Artboard & Design ModeCơ bản
04Timeline & Animate ModeCơ bản
05Keyframe & EasingCơ bản
06State Machine — Nền tảngTrung cấp
07States & TransitionsTrung cấp
08Listeners & InteractionsTrung cấp
09Constraints & BonesTrung cấp
10Nested ArtboardsNâng cao
11Data BindingNâng cao
12Export & Handoff cho ClientPortfolio
1

Giai đoạn 1 — Làm quen phần mềm

Bài 01–05 · Mục tiêu: tạo được animation đơn giản, hiểu workflow của Rive

01
Cơ bản

Rive là gì — và tại sao khác với After Effects

Hiểu Rive hoạt động như thế nào trước khi mở phần mềm

30 phút
Khái niệm cốt lõi

After Effects xuất ra video — người xem thụ động, xem từ đầu đến cuối. Rive xuất ra file .riv — animation chạy live trên website/app, phản ứng với người dùng (click, hover, kéo). Đây là sự khác biệt hoàn toàn về bản chất.

After Effects

Xuất video MP4/MOV. Animation chạy tuyến tính A→B. Người xem không tương tác được. Phù hợp: explainer video, brand film, marketing.

Rive

Xuất file .riv. Animation phản ứng với user: click button thì chạy, hover thì đổi màu, kéo slider thì thay đổi. Phù hợp: app UI, web animation, game UI.

.riv fileFile xuất của Rive — nhẹ, chứa toàn bộ animation + logic tương tác. Developer nhúng vào app bằng 1 dòng code.
RuntimeEngine chạy file .riv trên iOS, Android, Web, Unity. Rive cung cấp miễn phí, open source.
Real-timeAnimation chạy trực tiếp — không phải video pre-rendered. GPU accelerated, mượt 120fps.
Bài tập

Vào rive.app/community — mở 3 file bất kỳ, nhấn Play và tương tác với chúng. Quan sát: animation phản ứng thế nào khi bạn hover, click. Đây là thứ bạn sẽ tự làm được sau khóa này.

02
Cơ bản

Giao diện Rive — Làm quen Workspace

Biết tên và chức năng của từng panel trước khi bắt đầu làm

45 phút
5 khu vực chính

Rive chia làm 5 vùng làm việc — hiểu từng vùng giúp bạn không bị lạc khi mới dùng.

1Toolbar (trái) — công cụ tạo hình: Shape, Path, Bones, Text. Giống Illustrator nhưng đơn giản hơn nhiều.
2Layers Panel (trái dưới) — xem cấu trúc layer. Đặt tên layer rõ ràng ngay từ đầu — quan trọng khi animation phức tạp.
3Artboard (giữa) — canvas làm việc. Đây là kích thước cuối của animation khi export.
4Inspector (phải) — thay đổi thuộc tính của object được chọn: vị trí, kích thước, màu sắc, opacity.
5Timeline (dưới) — xuất hiện khi vào Animate mode. Tương tự timeline của After Effects nhưng đơn giản hơn.

Lưu ý quan trọng: Rive có 2 mode — Design Mode và Animate Mode. Phím Tab để chuyển qua lại. Nếu vô tình làm gì trong sai mode, bạn sẽ tạo keyframe không mong muốn. Luôn check đang ở mode nào.

Bài tập

Tạo file mới tại rive.app. Tạo 1 rectangle, 1 ellipse, 1 text. Thay đổi màu, kích thước, vị trí của từng object. Đặt tên layer cho từng cái. Nhấn Tab để chuyển sang Animate mode và quan sát timeline thay đổi thế nào.

03
Cơ bản

Artboard & Design Mode — Xây dựng artwork

Vẽ và sắp xếp asset trong Rive — import từ Figma và tổ chức layer

60 phút
Artboard là gì

Artboard là canvas độc lập — mỗi artboard có animation riêng và state machine riêng. 1 file Rive có thể có nhiều artboard: 1 artboard cho button, 1 cho loading spinner, 1 cho mascot. Sau này có thể lồng chúng vào nhau.

1Tạo Artboard — Click vào nền trống, kéo để tạo artboard. Set kích thước trong Inspector. Ví dụ: 400×400px cho animated icon.
2Import từ Figma — Copy as SVG trong Figma → Paste vào Rive. Hoặc export SVG từ Illustrator. Giữ nguyên tên layer để dễ animate sau.
3Tổ chức layer — Group các element liên quan. Tên layer nên rõ ràng: "icon-check", "bg-circle", "label-text". Developer sẽ đọc tên layer này khi code.
4Vector paths — Rive có Pen Tool để vẽ path như Illustrator. Dùng cho custom shapes phức tạp. Shape cơ bản (rect, ellipse) dùng toolbar trái.
GroupNhóm các layer lại. Khi animate, bạn có thể move/rotate toàn bộ group thay vì từng layer.
Origin pointĐiểm gốc để rotate/scale. Thay đổi origin để rotate từ góc trái thay vì center.
ClippingCắt object theo shape khác — giống mask trong After Effects. Dùng để tạo reveal animation.
Mini Project 1 — Animated Icon Design

Tạo 1 artboard 200×200px. Thiết kế icon đơn giản (play button, check mark, hoặc wifi icon) bằng shapes trong Rive. Không cần animate chưa — tập trung vào tổ chức layer cho đúng. Mục tiêu: hiểu Design Mode thành thạo trước khi sang Animate Mode.

04
Cơ bản

Timeline & Animate Mode — Tạo chuyển động đầu tiên

Hiểu timeline của Rive và tạo animation đầu tiên

60 phút
Timeline trong Rive vs After Effects

Timeline Rive hoạt động tương tự AE nhưng gọn hơn. Mỗi "Animation" (timeline) là 1 trạng thái riêng — ví dụ: animation "Idle", animation "Hover", animation "Click". Sau này State Machine sẽ điều phối animation nào chạy khi nào.

1Tạo Animation mới — nhấn dấu + ở Animation List panel dưới cùng. Đặt tên rõ ràng: "idle", "hover", "pressed".
2Set keyframe — vào Animate Mode (Tab), chọn object, thay đổi thuộc tính (vị trí, màu, opacity). Kim cương nhỏ xuất hiện = keyframe đã tạo.
3Loop options — mỗi animation có 3 chế độ: Loop (lặp mãi), One-shot (chạy 1 lần), Ping-pong (chạy xuôi rồi ngược). Set ở thanh timeline phía trên.
4Properties có thể key — X, Y, Rotation, Scale, Opacity, Fill Color, Stroke Width — và nhiều hơn. Nhìn icon kim cương cạnh property trong Inspector.

Khác biệt với AE: Trong Rive, bạn tạo nhiều animation riêng biệt (Idle, Hover, Click) thay vì 1 timeline dài. State Machine sau này sẽ quyết định animation nào chạy. Đây là tư duy mới cần làm quen.

Bài tập

Dùng icon từ bài 03, tạo 2 animation: "idle" (icon đứng yên, có thể pulse nhẹ) và "appear" (icon fly in từ dưới lên, fade in). Mỗi animation khoảng 30–60 frame. Nhấn Play để preview từng cái.

05
Cơ bản

Keyframe & Easing — Chuyển động đẹp và tự nhiên

Easing là thứ phân biệt animation nghiệp dư và chuyên nghiệp

45 phút
Easing trong Rive

Rive có Graph Editor để edit easing curve — giống AE. Có sẵn các preset: Linear, Ease In, Ease Out, Ease In Out. Bạn cũng có thể kéo Bezier curve tùy chỉnh. Ease Out (vào nhanh, ra chậm) thường dùng nhất cho UI animation vì cảm giác tự nhiên nhất.

1Mở Graph Editor — click icon graph trên timeline. Kéo 2 handle để điều chỉnh curve.
2Ease In — chậm rồi nhanh. Dùng cho: object đang đứng yên bắt đầu di chuyển.
3Ease Out — nhanh rồi chậm. Dùng cho: object đang di chuyển dừng lại. Cảm giác "landing" tự nhiên.
4Ease In Out — chậm → nhanh → chậm. Dùng khi animation có điểm đầu và cuối rõ ràng.
InterpolationCách Rive tính toán giá trị giữa 2 keyframe. Linear = thẳng, Cubic = đường cong mượt.
OvershootObject vượt qua điểm cuối rồi quay lại — tạo cảm giác "springy" tự nhiên. Rất phổ biến trong UI animation hiện đại.
Mini Project 2 — Animated Loading Spinner

Tạo 1 loading spinner hoàn chỉnh: vòng tròn rotate 360° với easing phù hợp, set loop. Thêm 1 animation "appear" với fade in. Mục tiêu: animation trông đẹp và chuyên nghiệp — không jerky, không linear. Đây là animation bạn có thể đưa vào portfolio ngay.

2

Giai đoạn 2 — State Machine & Interactivity

Bài 06–09 · Mục tiêu: tạo animation phản ứng với người dùng — đây là core của Rive

06
Trung cấp

State Machine — Khái niệm quan trọng nhất của Rive

Hiểu State Machine = hiểu được 70% Rive. Đây là thứ không có trong After Effects.

90 phút
State Machine là gì — giải thích đơn giản

Hãy nghĩ State Machine như một "bộ não" điều khiển animation. Bạn có nhiều animation (Idle, Hover, Clicked) — State Machine quyết định: khi nào chạy cái nào, chuyển qua cái nào, dừng ở đâu. Thay vì một video dài, bạn có nhiều trạng thái và logic chuyển đổi giữa chúng.

1Tạo State Machine — nhấn + trong Animation List, chọn "State Machine". Xuất hiện graph thay vì timeline.
2States (Trạng thái) — kéo các animation đã tạo vào graph. Mỗi animation = 1 state. Ví dụ: state "Idle", state "Hover", state "Pressed".
3Entry & Exit — Entry là state bắt đầu khi animation load. Exit là state kết thúc. Luôn phải có Entry.
4Transitions (Mũi tên) — kéo từ state này sang state kia để tạo transition. Đây là "đường đi" giữa các trạng thái.
5Conditions — mỗi transition có condition: khi nào thì chuyển? Ví dụ: "chuyển sang Hover khi isHovered = true".

Đây là bài học khó nhất. Đừng nản nếu chưa hiểu ngay lần đầu. Xem lại nhiều lần, thực hành với ví dụ đơn giản. Một khi "click" được State Machine, mọi thứ còn lại trong Rive sẽ dễ hơn nhiều.

Bài tập

Tạo State Machine đầu tiên với 2 state đơn giản: "Idle" (circle màu xám) và "Active" (circle màu xanh, scale 1.2). Tạo transition từ Idle sang Active. Chưa cần condition — chỉ cần thấy 2 state hiện ra trong graph là thành công.

07
Trung cấp

States, Transitions & Blend States

Xây dựng logic chuyển đổi giữa các trạng thái — trái tim của interactive animation

90 phút
1Transition duration — mỗi transition có thời gian chuyển (crossfade). Điều chỉnh để transition mượt, không jump đột ngột.
2Boolean input — True/False. Dùng cho: isHovered, isSelected, isOpen. Khi boolean đổi giá trị → transition xảy ra.
3Trigger input — Bắn 1 lần rồi reset. Dùng cho: onClick, onComplete. Phù hợp cho action không duy trì trạng thái.
4Number input — Giá trị số. Dùng cho: progress (0→100), scroll position, volume level.
5Blend States — Mix 2 animation dựa trên 1 số. Ví dụ: character nhìn trái (value=0) → nhìn thẳng (value=50) → nhìn phải (value=100) theo vị trí chuột.
Mini Project 3 — Interactive Button

Tạo button với 3 state: Default (xám), Hover (xanh, scale nhẹ), Pressed (tối hơn, scale nhỏ lại). Dùng Boolean "isHovered" và Trigger "onClick". Đây là component cơ bản nhất của UI animation — nắm vững button là nắm vững được 50% UI work.

08
Trung cấp

Listeners & User Interactions

Kết nối animation với hành động của người dùng — không cần code

75 phút
Listeners là gì

Listeners cho phép bạn gán hành động người dùng (hover, click, drag) lên các element trên artboard mà không cần code. Khi người dùng hover vào object, Listener tự động cập nhật input trong State Machine — animation phản ứng tức thì.

1Pointer Enter/Exit — khi chuột vào/ra khỏi vùng element. Dùng cho hover effect. Gán vào Boolean: true khi enter, false khi exit.
2Pointer Down/Up — khi click chuột xuống/nhả ra. Dùng cho press effect trên button.
3Pointer Move — track vị trí chuột. Dùng cho eye tracking, parallax, joystick effect. Gán vào Number input.
4Click — complete click (down + up). Thường dùng Trigger để fire 1 lần khi click xong.
Bài tập

Nâng cấp button từ bài 07: thêm Listeners để button tự động hover khi chuột vào (không cần code). Kiểm tra trong Preview mode — hover vào button và xem animation phản ứng. Nếu hoạt động đúng, bạn đã tạo được interactive animation đầu tiên hoàn toàn không cần code.

09
Trung cấp

Constraints & Bones — Animation nâng cao

Tạo chuyển động phức tạp: character rigging, follow path, IK

90 phút
BonesBộ xương để rig character. Các shape gắn vào bone — di chuyển bone thì shape di chuyển theo. Giống puppet tool của AE nhưng mạnh hơn.
IK (Inverse Kinematics)Kéo điểm cuối (bàn tay), toàn bộ cánh tay tự điều chỉnh. Dùng cho character animation tự nhiên.
ConstraintsRàng buộc giữa 2 object: Translation (A di chuyển theo B), Rotation (A xoay theo B), Scale, IK, Follow Path.
Follow PathObject di chuyển theo đường path. Dùng cho: animation theo orbit, vehicle đi theo đường.
1Tạo Bones — chọn Bone tool, click để tạo chuỗi bone. Click vào mesh/shape để bind vào bone.
2Add Constraint — chọn object, vào Inspector → Constraints → Add. Chọn target là object khác.
3Joystick — control rigging phức tạp bằng 1 điểm kéo (XY). 1 joystick có thể điều khiển cùng lúc nhiều animation blend. Rất phổ biến cho face tracking.
Mini Project 4 — Simple Character Rig

Tạo nhân vật đơn giản (có thể chỉ là hình tròn làm đầu + hình chữ nhật làm thân). Rig bằng bones. Tạo animation "wave" cho cánh tay. Thêm State Machine với Listener: click vào character thì wave. Đây là foundation cho character animation trong Rive.

3

Giai đoạn 3 — Nâng cao & Portfolio

Bài 10–12 · Mục tiêu: tạo được project hoàn chỉnh, export và pitch SaaS client

10
Nâng cao

Nested Artboards — Component System

Xây dựng animation phức tạp từ các component nhỏ có thể tái sử dụng

75 phút
Nested Artboard là gì

Nested Artboard cho phép bạn lồng 1 artboard vào trong artboard khác — giống như component trong Figma hoặc pre-comp trong After Effects. Bạn tạo 1 button artboard, sau đó dùng nó 10 lần trong 1 screen artboard mà không cần duplicate animation.

1Tạo component artboard — build button, icon, hoặc bất kỳ element nào là artboard riêng. Đảm bảo State Machine của nó hoạt động đúng.
2Nested vào parent — trong artboard lớn, dùng Artboard tool để đặt artboard nhỏ vào. Resize và position như object thường.
3Expose inputs — State Machine của nested artboard có thể được điều khiển từ parent. Dùng để sync nhiều component với nhau.
Mini Project 5 — UI Screen với Multiple Components

Dùng button từ bài 07, loading spinner từ bài 05 — nested cả hai vào 1 screen artboard 375×812px (iPhone size). Tạo flow: click button → loading spinner xuất hiện → sau 2 giây → success state. Đây là UI interaction flow thực tế mà SaaS client cần.

11
Nâng cao

Data Binding — Animation kết nối với data thực

Tính năng mạnh nhất của Rive 2025 — animation phản ứng với data động

90 phút
Data Binding là gì — và tại sao quan trọng

Data Binding cho phép animation của bạn kết nối với data thực từ app — ví dụ: text trong animation thay đổi theo tên người dùng, progress bar tự động điền theo % hoàn thành task, avatar thay đổi theo ảnh user. Developer chỉ cần truyền data vào — Rive tự animate. Đây là lý do Spotify Wrapped và Duolingo dùng Rive.

View ModelContainer chứa các data properties. Developer viết code để populate View Model — Rive đọc và animate tương ứng.
Bind to textText trong Rive có thể bind vào string từ View Model. "Hello {username}" tự điền tên thật.
Bind to numberProgress bar, slider value, counter — bind vào number từ app. Thay đổi number = animation tự chạy.

Lưu ý: Data Binding thường cần phối hợp với developer để implement trong app thực. Với tư cách designer, bạn cần biết cách setup Data Binding trong Rive và đặt tên rõ ràng để developer dễ kết nối. Không cần biết code.

Bài tập

Tạo 1 "Stats Card" animation: có text name (bind), số % (bind), progress bar (bind theo số %). Trong Rive preview, thay đổi giá trị để test. Đây là component rất phổ biến trong SaaS dashboard — client nào cũng cần.

12
Portfolio

Export & Handoff — Giao file cho Client và Developer

Bước cuối: xuất file đúng cách và trình bày cho client

60 phút
1Export .riv file — File → Export → Download .riv. Developer dùng file này để nhúng vào app. File size rất nhỏ (thường dưới 500KB so với video MB).
2Share link — Rive tạo shareable link để client preview trực tiếp trên browser. Không cần gửi file — gửi link là client thấy animation chạy live.
3Embed code — Rive generate sẵn embed code (script tag) để nhúng vào website. Phù hợp cho landing page client.
4Export video/GIF — Nếu client cần xem preview dạng video: File → Export → MP4 hoặc GIF. Dùng để gửi proposal, không dùng để production.
5Developer handoff — Tên rõ ràng cho artboards, state machines, inputs. Viết 1 trang doc ngắn: input nào là gì, trigger nào trigger gì. Developer sẽ rất biết ơn.
Final Project — SaaS Onboarding Animation

Tạo 1 onboarding flow hoàn chỉnh cho SaaS app giả định (3 màn hình): Welcome screen → Feature highlight screen → Get Started screen. Dùng Nested Artboards cho các component. State Machine điều phối flow giữa các screen. Export .riv + share link. Đây là project đưa vào portfolio để pitch SaaS client.

Sau khi hoàn thành giáo trình này
Học thêm gì để nâng cao kỹ năng
Giáo trình này cho bạn foundation vững. Đây là những hướng chuyên sâu tiếp theo tùy theo mục tiêu.
Nâng cao kỹ thuật

Rive Scripting (Luau)

Viết logic phức tạp bằng Luau script ngay trong Rive editor. Dùng cho: AI-driven animation, complex game logic, data visualization động. Không bắt buộc nhưng mở ra khả năng không giới hạn.

Nâng cao kỹ thuật

3D trong Rive

Rive có 3D workflow từ 2024 — import 3D model và animate trong Rive. Kết hợp với Blender: render 3D element trong Blender, bring vào Rive để add interactivity.

Mở rộng thị trường

Rive + Game Engine

Rive chạy trong Unity và Unreal Engine. Nếu muốn làm game UI animation — đây là hướng rất hot. Game studio trả rất cao cho Rive animator có thể làm game UI.

Mở rộng thị trường

Motion Design System

Xây dựng hệ thống component Rive cho client: button library, icon set interactive, loading states, transition library. Đây là giá trị cao nhất — client trả ongoing fee để maintain.

Portfolio

Rive Community

Upload project lên rive.app/community. Người khác duplicate và remix — exposure tốt. Xem và học từ các file community của top animator. Đây là cách học nhanh nhất sau khi có foundation.

Khoá học

Rive Masterclass

rivemasterclass.com — 60+ bài học nâng cao sau khi xong giáo trình này. Tập trung vào Data Binding, Scripting, và production workflow. Học sau khi đã làm xong Final Project.

Lời nhắn cuối

Mỗi bài học trong giáo trình này có 1 bài tập thực hành — không bỏ qua bài tập. Xem tutorial mà không làm thực hành = không học được gì. Não chỉ ghi nhớ khi tay làm. Sau mỗi bài, có output cụ thể — dù nhỏ. 12 bài = 6 mini project = foundation đủ vững để làm real project cho client.

Thuan N.Kim · thuannkim.com · Giáo trình Rive cá nhân · 2026