# Tạo thiết kế tương tác phản hồi theo chuột với Hana - Hana | Mọi điều bạn cần biết - Spline Academy (https://spline.design/vi/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> Trong video này, chúng tôi sẽ giới thiệu và đưa ra nhiều ví dụ về cách biến thiết kế thành trải nghiệm tương tác để chúng phản hồi theo con trỏ của bạn bằng…

1. [Academy](https://spline.design/vi/academy)
2. [Khóa học](https://spline.design/vi/academy/collections)
3. [Hana | Mọi điều bạn cần biết](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know)
4. Tạo thiết kế tương tác phản hồi theo chuột với Hana

# Tạo thiết kế tương tác phản hồi theo chuột với Hana

Bài 5 / 15HanaCơ bản6 phút

Trong video này, chúng tôi sẽ giới thiệu và đưa ra nhiều ví dụ về cách biến thiết kế thành trải nghiệm tương tác để chúng phản hồi theo con trỏ của bạn bằng Hana. Chúng ta sẽ khám phá các sự kiện như Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At và Follow, cũng như cách dùng chúng để kích hoạt hoạt ảnh và hiệu ứng.

## Bạn sẽ học được gì

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Tạo cú nhấp – sự kiện Mouse Down](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Thả cú nhấp – sự kiện Mouse Up](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Giữ chuột – sự kiện Mouse Press](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Phép màu khi rê chuột – sự kiện Mouse Hover](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Khiến thiết kế hướng về con trỏ – sự kiện Look At](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Khiến thiết kế đi theo con trỏ – sự kiện Follow](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Xem trước hướng dẫn tiếp theo](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Tài nguyên liên quan

- [Interactive Flat IconsMẫu](https://app.spline.design/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana?redirect-duplicate-template-uuid=2a05e307-90dd-4666-bc8b-f2b7f3c2cce8&is-2d-file=true)
- [Designing in HanaTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaTài liệu](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Tổng quan

- Hana
- 6 phút
- Cơ bản

## Tiếp theo

[Tạo tương tác Follow 2D8 phútCơ bản](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)[Tiếp tục](https://spline.design/vi/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

[Spline](https://spline.design/vi)

Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.

#### Hỏi AI về Spline

#### Sản phẩm

- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)

#### Runtime

- [Web](https://spline.design/vi/web)
- [iOS](https://spline.design/vi/ios)
- [Android](https://spline.design/vi/android)

#### Ứng dụng

- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)

#### Học

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)

#### Cộng đồng

- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)

#### Công ty

- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)

#### Pháp lý

- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)

#### Liên hệ

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.