# Mereka bentuk interaksi mikro butang togol 3D dengan Spline - Spline Academy (https://spline.design/ms/academy/tutorials/designing-a-3d-toggle-button-micro-interaction-with-spline)

> Dalam tutorial ini, anda akan belajar cara menggunakan sistem peristiwa dan keadaan untuk mencipta interaksi mikro dan membina butang togol dalam 3D.

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Mereka bentuk interaksi mikro butang togol 3D dengan Spline

# Mereka bentuk interaksi mikro butang togol 3D dengan Spline

Spline 3DPemula14 min

Dalam tutorial ini, anda akan belajar cara menggunakan sistem peristiwa dan keadaan untuk mencipta interaksi mikro dan membina butang togol dalam 3D.

☀️ Kemas kini: Spline berkembang dengan pantas, dan kini terdapat cara baharu untuk mencapai kesan togol tanpa menggunakan objek halimunan.

Lihat tutorial ini untuk maklumat lanjut: <https://www.youtube.com/watch?v=lJIDSiDlhvw&t=10s&ab%5Fchannel=Spline>

☀️Kemas kini 2: Components baharu boleh digunakan untuk mencipta variasi elemen UI 3D anda.

Tutorial tentang komponen di sini: <https://youtu.be/VSddFnDjPUA>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=0s)
2. [0:20Membuat bentuk togol](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=20s)
3. [1:40Mencipta bahan](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=100s)
4. [5:45Mencipta pencetus peristiwa](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=345s)
5. [8:47Mencipta keadaan](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=527s)
6. [11:30Menambah perincian mikro](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=690s)
7. [12:20Pilihan eksport akhir](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=740s)

## Gambaran keseluruhan

- Spline 3D
- 14 min
- Pemula

## Tutorial berkaitan

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

[Bina Papan Kekunci Interaktif Gelap dalam 3DSpline 3DPertengahan16 min](https://spline.design/ms/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Cara Membina Pelbagai Adegan 3D dan Mengimport AnimasiSpline 3DPertengahan18 min](https://spline.design/ms/academy/tutorials/how-to-build-3d-multi-scenes-and-import-animations)[Mereka bentuk laman web 3D dengan Spline dan FramerSpline 3DPemula14 min](https://spline.design/ms/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

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