# Cipta Reka Bentuk Interaktif yang Bertindak Balas terhadap Tetikus Anda dengan Hana - Hana | Semua yang Perlu Anda Ketahui - Spline Academy (https://spline.design/ms/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> Dalam video ini, kami akan memberi pengenalan dan menunjukkan pelbagai contoh cara anda boleh mengubah reka bentuk menjadi pengalaman interaktif supaya reka…

1. [Academy](https://spline.design/ms/academy)
2. [Kursus](https://spline.design/ms/academy/collections)
3. [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know)
4. Cipta Reka Bentuk Interaktif yang Bertindak Balas terhadap Tetikus Anda dengan Hana

# Cipta Reka Bentuk Interaktif yang Bertindak Balas terhadap Tetikus Anda dengan Hana

Pelajaran 5 daripada 15HanaPemula6 min

Dalam video ini, kami akan memberi pengenalan dan menunjukkan pelbagai contoh cara anda boleh mengubah reka bentuk menjadi pengalaman interaktif supaya reka bentuk anda bertindak balas terhadap kursor menggunakan Hana. Kami akan meneroka peristiwa seperti Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At dan Follow, serta cara menggunakannya untuk mencetuskan animasi dan kesan.

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Menjadikan Sesuatu Boleh Diklik – Peristiwa Mouse Down](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Melepaskan Klik – Peristiwa Mouse Up](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Menahan Tekanan – Peristiwa Mouse Press](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Keajaiban Hover – Peristiwa Mouse Hover](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Jadikan Reka Bentuk Anda Menghadap Kursor – Peristiwa Look At](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Jadikan Reka Bentuk Anda Mengikut Kursor – Peristiwa Follow](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Intipan Tutorial Seterusnya](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Sumber berkaitan

- [Interactive Flat IconsTemplat](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 HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Gambaran keseluruhan

- Hana
- 6 min
- Pemula

## Seterusnya

[Cipta Interaksi Follow 2D8 minPemula](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)[Teruskan](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

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

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

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

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ms/academy)
- [API Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Penyelesaian](https://spline.design/solutions)

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

- [Terma & Syarat](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Hubungi

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

© 2026 - Spline, Inc.