# Cipta Reka Bentuk Interaktif yang Bertindak Balas terhadap Tetikus Anda dengan Hana - 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. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Cipta Reka Bentuk Interaktif yang Bertindak Balas terhadap Tetikus Anda dengan Hana

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

HanaPemula6 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

## Sebahagian daripada

- [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/ms/academy/collections/hana-everything-you-need-to-know/create-interactive-designs-that-react-to-your-mouse-with-hana)

## Tutorial berkaitan

[Semua tutorial](https://spline.design/ms/academy/tutorials)

[Reka Bentuk Kesan Interaktif dengan Progressive Blur dan Gradien LicinHanaPemula9 min](https://spline.design/ms/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Tambah Interaksi Berasaskan Tetikus pada Objek 3DSpline 3DPemula14 min](https://spline.design/ms/academy/tutorials/add-mouse-based-interactions-to-3d-objects)[Cara Mencipta Visualisasi Data 3D dalam Spline Menggunakan Pemboleh Ubah dan API Masa NyataSpline 3DLanjutan15 min](https://spline.design/ms/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[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.