# Hana 中的液态玻璃与 3D - Spline blog (https://spline.design/zh/blog/hana-3d-glass-autolayout-video)

> Hana 新功能：3D 变换、液态玻璃和自动布局

[博客](https://spline.design/zh/blog)

2025年7月9日

# Hana 中的液态玻璃与 3D

Hana 新功能：3D 变换、液态玻璃和自动布局

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

今天，我们为 Hana 发布一次重大更新，带来实时液态玻璃、3D 变换、自动布局和视频图层等突破性功能。

## Hana 中的液态玻璃

随着 iOS 26 的推出，液态玻璃效果吸引了设计圈的目光。现在，你可以在 Hana 中把这种效果应用到任何对象图层上。

你可以编辑玻璃参数，例如 Distortion，来控制折射的程度。

不仅如此，你还可以跳出 iOS 的风格，创建自定义的玻璃效果。我们让这些参数足够通用，可以夸大部分效果的表现，从而实现各种创意结果和更具冲击力的视觉美感。

悬停或触摸即可交互（使用 Hana 制作的体验）

## 可叠加的玻璃

在大多数设计工具中，模糊或玻璃效果通常只作用于单个图层，也就是说，如果你叠加多个图层，玻璃的扭曲不会累积，看起来依然是平的。

在 Hana 中，你可以轻松叠加多层玻璃，看到每一层如何折射后方或下方的元素，就像在现实世界中一样，由此带来一整套全新的创意可能。这不仅适用于玻璃效果，也适用于背景模糊效果。

在 Hana 中操控多层液态玻璃

## 3D 变换

从 2D 走向 3D 一直是个挑战。在开始开发这项功能时，我们就希望提供一种无缝的方式，让你能在 2D 和 3D 之间轻松切换，而不丢失任何内容。

在 Hana 中，任何对象现在都可以成为 3D 对象，并提供参数来控制它在 3D 空间中的位置（深度）、旋转和透视。

所有这些参数都可以制作动画，并与状态/事件系统兼容。

在 Hana 中控制对象的透视、旋转和 z 轴位置

## 画框与 3D 传送门

当一个画框变成 3D 时，它也就成了通往自身 3D 空间的一扇窗。这在制作传送门时尤其有用，传送门是一种能在自身内部看到纵深的视觉元素。

做法很简单：把元素放进画框，将画框设为 3D，然后修改其中元素的 3D 位置或旋转。此时如果你改变画框的旋转或位置，就能看到其中的元素以多层纵深呈现出来。

在 Hana 中创建的画框内 3D 传送门

## 自动布局

Hana 现在支持参数完全可动画的布局。你可以创建垂直和水平布局，并自定义内边距和间距。

布局与事件和状态协同工作，并实时更新，进一步增强交互性。

我们还加入了对瀑布流布局的支持，类似于 Pinterest 的分栏布局。

使用 Hana 布局制作的体验

## 视频图层

现在，你可以轻松地在 Spline Hana 的任何图层中嵌入视频。这在制作交互式演示或设计动效时非常实用。只需在 Fill 面板中切换到 Video Layer，然后上传或拖放你的视频即可。

与 Spline 的 3D 编辑器类似，Hana 中的视频也可以由自定义事件触发。默认情况下，视频会在 Start 事件时播放，但你可以修改这一设置，用鼠标事件或其他任何事件来触发它。

## 全新的创意可能

内容真不少！ 希望你喜欢我们今天发布的所有新功能，并开始创作令人兴奋的新设计。

—— Spline 团队

## 更多博客文章

[2026年11月3日Spline Arena 正式推出](https://spline.design/zh/blog/introducing-spline-arena)[2026年10月21日Spline for ChatGPT 正式推出](https://spline.design/zh/blog/introducing-spline-for-chatgpt)[2026年8月27日Hana V2 正式发布](https://spline.design/zh/blog/hana-v2)

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

面向团队及其智能体的 3D 和 2D 编辑器。一键发布到网页、iOS 和 Android。

#### 向 AI 询问 Spline

#### 产品

- [3D 设计](https://spline.design/zh/3d-design)
- [Hana](https://spline.design/zh/hana)
- [Omma](https://omma.build)
- [AI 3D 生成](https://spline.design/zh/ai-generate)
- [Spline MCP](https://spline.design/zh/mcp)
- [Spline Arena](https://spline.design/zh/arena)
- [定价](https://spline.design/zh/pricing)
- [企业版](https://spline.design/zh/enterprise)

#### 运行时

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

#### 应用

- [下载](https://spline.design/zh/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [下载 Spline Mirror](https://spline.design/download-mirror)

#### 学习

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/zh/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [解决方案](https://spline.design/solutions)

#### 社区

- [Spline 社区](https://community.spline.design)
- [Blog](https://spline.design/zh/blog)
- [更新日志](https://spline.design/zh/changelog)
- [教育](https://spline.design/zh/education)
- [Contra](https://spline.design/contra)
- [联盟计划](https://spline.design/zh/affiliate)

#### 公司

- [客户](https://spline.design/zh/customers)
- [招贤纳士](https://www.ycombinator.com/companies/spline/jobs)
- [安全](https://spline.design/zh/security)

#### 法律

- [条款与条件](https://spline.design/terms)
- [隐私](https://spline.design/privacy)

#### 联系我们

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

© 2026 - Spline, Inc.