# Liquid Glass dan 3D dalam Hana - Spline blog (https://spline.design/ms/blog/hana-3d-glass-autolayout-video)

> Baharu dalam Hana: 3D Transform, Liquid Glass dan Autolayout

[Blog](https://spline.design/ms/blog)

9 Julai 2025

# Liquid Glass dan 3D dalam Hana

Baharu dalam Hana: 3D Transform, Liquid Glass dan Autolayout

[Buka Hana](https://app.spline.design)

Hari ini, kami mengumumkan kemas kini besar untuk Hana yang memperkenalkan ciri revolusioner seperti Liquid Glass masa nyata, 3D Transform, Autolayout dan Video Layers.

## Liquid Glass dalam Hana

Dengan pengenalan iOS 26, kesan Liquid Glass telah menarik perhatian komuniti reka bentuk. Kini, anda boleh menggunakan kesan ini pada mana-mana lapisan objek dalam Hana.

Anda boleh menyunting parameter kaca, seperti Distortion, untuk mengawal tahap pembiasan.

Namun, anda boleh melangkaui gaya iOS dan mencipta kesan kaca tersuai. Kami telah memastikan parameternya cukup umum untuk mencapai pelbagai hasil kreatif, dengan membenarkan anda membesar-besarkan sesetengah tingkah laku kesan itu dan mencapai estetika visual yang lebih menonjol.

Halakan kursor atau sentuh untuk berinteraksi (Pengalaman yang dibuat dengan Hana)

## Kaca Bertindan

Dalam kebanyakan alat reka bentuk, pelaksanaan kesan kabur atau kaca biasanya terhad kepada satu lapisan sahaja, bermakna jika anda menindankan beberapa lapisan, herotan kaca tidak akan terkumpul dan kekal rata.

Dalam Hana, anda boleh menindankan beberapa lapisan kaca dengan mudah dan melihat bagaimana setiap satu membiaskan elemen di belakang atau di bawahnya, sama seperti dalam kehidupan sebenar, sekali gus membuka peluang kreatif yang serba baharu. Ini boleh dilakukan untuk kesan kaca, dan juga untuk kesan kabur latar belakang.

Manipulasi beberapa lapisan Liquid Glass dalam Hana

## 3D Transform

Beralih daripada 2D ke 3D sentiasa menjadi cabaran. Apabila kami mula mengusahakan ciri ini, kami tahu kami mahu menyediakan cara yang lancar untuk bertukar antara 2D dan 3D dengan mudah tanpa kehilangan apa-apa di antaranya.

Dalam Hana, mana-mana objek kini boleh menjadi objek 3D, dengan parameter untuk mengawal kedudukan (Depth), putaran dan perspektifnya dalam ruang 3D.

Semua parameter ini boleh dianimasikan dan serasi dengan sistem keadaan/peristiwa.

Kawal perspektif, putaran dan kedudukan z objek dalam Hana

## Bingkai dan Portal 3D

Apabila sesuatu bingkai menjadi 3D, ia juga menjadi tingkap ke dalam ruang 3D miliknya sendiri. Ini amat berguna untuk mencipta portal, iaitu elemen visual yang memperlihatkan kedalaman di dalamnya.

Caranya mudah: letakkan item di dalam bingkai, jadikan bingkai itu 3D, dan ubah kedudukan atau putaran 3D item di dalamnya. Kini, jika anda mengubah putaran atau kedudukan bingkai, anda akan melihat bagaimana item dipaparkan di dalamnya, dengan pelbagai tahap kedalaman.

Portal 3D dalam Bingkai yang dicipta dalam Hana

## Autolayout

Hana kini menyokong susun atur dengan parameter yang boleh dianimasikan sepenuhnya. Anda boleh mencipta susun atur menegak dan mendatar dengan padding dan jarak yang boleh disesuaikan.

Susun atur berfungsi bersama peristiwa dan keadaan, serta dikemas kini dalam masa nyata untuk meningkatkan interaktiviti.

Kami juga telah menambah sokongan untuk susun atur masonry, yang serupa dengan susun atur lajur Pinterest.

Pengalaman yang dibuat dengan Hana menggunakan Layout

## Video Layers

Kini anda boleh membenamkan video pada mana-mana lapisan dalam Spline Hana dengan mudah. Ini sangat berguna apabila membina persembahan interaktif atau mereka bentuk untuk gerakan. Hanya tukar kepada Video Layer dalam panel Fill dan muat naik atau seret dan lepas video anda.

Sama seperti editor 3D Spline, video dalam Hana juga boleh dicetuskan oleh peristiwa tersuai. Secara lalai, video akan dimainkan pada peristiwa Start, tetapi anda boleh mengubahnya dan mencetuskannya dengan peristiwa tetikus atau mana-mana peristiwa lain.

## Kemungkinan kreatif baharu

Banyak sekali! Kami harap anda menikmati semua ciri baharu yang kami lancarkan hari ini dan mula mencipta reka bentuk baharu yang mengujakan.

— Pasukan Spline

## Lagi daripada blog

[3 November 2026Memperkenalkan Spline Arena](https://spline.design/ms/blog/introducing-spline-arena)[21 Oktober 2026Memperkenalkan Spline untuk ChatGPT](https://spline.design/ms/blog/introducing-spline-for-chatgpt)[27 Ogos 2026Memperkenalkan Hana V2](https://spline.design/ms/blog/hana-v2)

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