# Bina Animasi Interaktif: UI Berubah Bentuk & Cahaya Reaktif dalam Hana (Langkah demi Langkah) - Spline Academy (https://spline.design/ms/academy/tutorials/build-interactive-animations-morphing-ui-reactive-glow-in-hana-step-by-step)

> Bersedia untuk menjadikan UI anda terasa hidup? Dalam tutorial Hana langkah demi langkah ini, kami membongkar cara membina antara muka yang lancar dan…

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Bina Animasi Interaktif: UI Berubah Bentuk & Cahaya Reaktif dalam Hana (Langkah demi Langkah)

# Bina Animasi Interaktif: UI Berubah Bentuk & Cahaya Reaktif dalam Hana (Langkah demi Langkah)

HanaPemula13 min

Bersedia untuk menjadikan UI anda terasa hidup? Dalam tutorial Hana langkah demi langkah ini, kami membongkar cara membina antara muka yang lancar dan responsif yang bertindak balas terhadap input pengguna seperti organisma hidup.

💬 Ada soalan? Tinggalkan di ruangan komen di bawah!

👍 Jangan lupa tekan suka dan langgan untuk lebih banyak tutorial dan berita Spline

Pautan: 🌸 Hana → <https://spline.design/hana> 💖 Spline → <http://app.spline.design> 📚 Spline Docs → <https://docs.spline.design> 👋 Spline Community → <https://app.spline.design/community>

Media sosial kami: 📷 Instagram → / splinetool 🎵 TikTok → / splinedesign 💙 LinkedIn → / splinetool 🐦 X → / splinetool 👾 Discord → / discord

## Gambaran keseluruhan

- Hana
- 13 min
- Pemula

## Tutorial berkaitan

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

[Cara Belajar Reka Bentuk 3D dengan Spline: Peta Jalan Praktikal daripada Pemula hingga PakarSpline 3DPemula8 min](https://spline.design/ms/academy/tutorials/how-to-learn-3d-design-with-spline-a-practical-roadmap-for-beginners-to-pros)[Mencipta Teks 3D Membias dalam HanaHanaPemula7 min](https://spline.design/ms/academy/tutorials/creating-refractive-3d-text-in-hana)[Cara menambah interaksi Seret & Lepas 3D dalam Spline | Tingkatkan laman web anda dengan hanya beberapa klikSpline 3DPemula5 min](https://spline.design/ms/academy/tutorials/how-to-add-a-3d-drag-drop-interaction-in-spline-level-up-your-website-in-just-a-few-clicks)

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