Unity UI的未来之路：从UGUI到UI Toolkit的架构演进与特性剖析(5)
第五章：UI Toolkit的样式、动画与主题化
在上一章中，我们掌握了UI Toolkit的核心工作流和Flexbox布局系统，学会了如何搭建UI的“骨架”。现在，是时候为这副骨架注入“血肉”与“灵魂”了。这一章，我们将深入探索UI Toolkit最强大的领域——样式系统（Styling），见证它如何通过USS（Unity Style Sheets）这根“魔法棒”，点石成金，赋予UI千变万化的视觉外观和生动的动态表现。
1. 样式化的核心：USS与UI Builder
为UI Toolkit元素添加样式，最佳且推荐的方式是通过USS文件 (Assets > Create > UI Toolkit > StyleSheet)。USS是Unity对Web CSS的实现，它使用相同的基于规则的格式，为UI设计过程带来了前所未有的灵活性和可维护性。通过USS，我们可以精确地定义元素的尺寸、颜色、字体、边框、间距等一切视觉属性。
UI Builder中的工作流
UI Builder是进行样式化创作的主战场：
- 关联样式表：在UI Builder左上角的StyleSheets面板中，通过“+”菜单，可以将一个或多个USS文件关联到当前打开的UXML文档上。
- 实时预览与修改：与UGUI不同，你可以在Unity编辑器处于运行模式时，实时地在UI Builder中修改USS文件，并立刻在Game视图中看到变化。文件名旁的星号（*）表示有未保存的更改。
画布背景（Canvas Background）
启用画布背景可以帮助你在颜色或背景图像上更直观地查看元素样式。
在层级面板（Hierarchy）中选择 UXML 文件，然后选择一个近似最终 UI 界面的画布背景，以便在上下文中判断样式变化。
Canvas Background
画布背景提供以下几种选项：
- 背景颜色（Background Color） ：代表游戏环境中的特定色调或颜色。
- 图像（Image） ：可以选择精灵或纹理作为背景（适用于还原原型图或参考图）。
- 摄像机（Camera） ：在背景中显示当前的游戏画面。
2. USS选择器 (Selectors)：样式的“寻址系统”
USS文件通过选择器（Selectors）来“查询”可视化树，并将样式规则应用到所有匹配的元素上。理解选择器的类型和优先级，是掌握USS的关键。
- 选择器的三种基本类型：
- 类型选择器 (Type Selector)：直接使用VisualElement的C#类名（如Button, Label）。它会匹配所有该类型的元素。在UI Builder中显示为白色。
- 名称选择器 (Name Selector)：匹配所有拥有特定name属性的元素。名称在UXML中是唯一的，因此它通常用于定位单个元素。名称选择器以井号#开头（如#button-play），显示为蓝色。
- 类选择器 (Class Selector)：这是一个可以被任意赋予给一个或多个元素的“标签”。这是最常用、也最推荐的样式化方式。类选择器以点.开头（如.green-button），显示为黄色。
USS 选择器参考
- 伪类 (Pseudo-classes)
选择器还可以附加伪类，用于匹配元素在特定交互状态下的样式。伪类以冒号:开头。例如：- .my-button:hover：匹配鼠标悬浮在my-button类元素上时的状态。
- .my-button:active：匹配鼠标在my-button类元素上按下时的状态。
- .my-button:focus：匹配元素获得焦点时的状态。
- 优先级 (Specificity)
当一个元素同时被多个选择器匹配时，优先级更高的选择器将生效。其基本规则是：
名称选择器 (#id) > 类选择器 (.class) > 类型选择器 (Type)
例如，一个按钮同时被Button（类型）、.green-button（类）和#button-play（名称）三个选择器选中，那么#button-play中定义的样式将覆盖其他两个。
使用不同选择器样式按钮
在上面的示例中，test.uss 样式表展示了不同选择器如何应用到一组按钮元素上：
- C# 类选择器 Button（白色） ：为层级中的所有按钮设置红色背景；
- 名称选择器 #button-play（蓝色） ：查找所有名称为“button-play”的元素，并为其设置橙色背景（覆盖其他选择器的样式）；
- 样式类选择器 .green-button（黄色） ：手动添加到最后一个按钮上。它会覆盖之前的样式，将背景设为绿色；
- 每个选择器都有针对 :hover 和 :focus 的伪类（绿色） ，用于定义鼠标悬停或聚焦时的样式。
点击层级面板标题中的垂直省略号（⋮）可以进一步可视化 UI 元素。
在层级面板中筛选不同的选择器。
3. 内联样式 (Inline Styles) 与样式覆盖
总会有一些特殊的、一次性的样式需求。为此，UI Toolkit提供了内联样式。
- 什么是内联样式？
当你在UI Builder中，直接选中一个Visual Element（而不是StyleSheet中的某个选择器），然后在Inspector中修改其样式属性时，你所做的修改，就是内联样式。这些样式直接保存在UXML文件中，并且其优先级最高，会覆盖所有来自USS文件的样式。在Inspector中，被内联样式覆盖的属性左侧会有一条白色竖线标记。
- 何时使用内联样式？
- 在UI设计的早期阶段，用于快速实验和调整。
- 用于处理那些独一无二的、无需复用的样式。例如，一个按钮组中，所有按钮都使用.menu-button类，但其中一个“退出”按钮需要一个特殊的红色背景，这时就可以为它单独设置内联样式。
- 管理内联样式
- 提取为类：UI Builder提供了一个便捷的功能Extract Inlined Styles to New Class，可以将一个元素的所有内联样式，一键提取到一个新的USS类选择器中，方便后续复用。
- 取消覆盖：可以右键点击被覆盖的属性，选择Unset来移除单个内联样式，或Unset All来移除所有内联样式，使其恢复到由USS文件定义的样式。
代码中的内联样式
样式也可以通过 C# 代码定义和覆盖。当内容是通过程序生成时，程序员会使用称为“C# 内联样式”的功能。
想象一个游戏应用，玩家可以使用社交媒体上的个人头像。开发者可以从社交媒体 API 自动获取照片，并覆盖选择器中的图像属性，将其应用到玩家头像元素中。这是只能通过 C# 实现的样式定制功能。
UI 设计师应与开发团队合作，将这些高级样式功能顺利整合到项目中。
4. 过渡动画 (Transition Animations)
UI Toolkit内置了一套受CSS Transitions启发的轻量级动画系统，用于在不同样式状态之间创建平滑的过渡动画。
- 工作原理
过渡动画必须定义在USS选择器上（不支持内联样式）。通常，我们会为一个元素的基础状态和一个伪类状态（如:hover）定义不同的样式，然后在伪类选择器中，添加Transition属性。 - 过渡属性 (Transition Properties)
在Inspector的底部，可以为选择器添加Transition动画，其核心参数包括：- Property: 要进行动画插值的属性（如background-color, width, transform等）。
- Duration: 动画持续时间（秒s或毫秒ms）。
- Easing Function: 缓动函数，用于模拟自然的加减速运动（如ease-in-out, ease-out-back等）。
- Delay: 动画开始前的延迟时间。
过渡事件
你可以为正在动画的视觉元素添加过渡事件的回调函数。这些回调可以支持更高级的工作流程，如动画序列或循环。
以下是一些常见的过渡事件及其说明：
- TransitionRunEvent ：当过渡被创建时发送；
- TransitionStartEvent ：当过渡的延迟阶段结束并开始执行时发送；
- TransitionEndEvent ：当过渡结束时发送；
- TransitionCancelEvent ：当过渡被取消时发送。
通过组合多个Transition属性，可以为一个状态变化，创建出包含多种属性同时变化的、复杂的、有机的动画效果。
5. 高级应用
- Render Texture：打破2D与3D的界限
默认情况下，UI Toolkit渲染在所有3D场景的最顶层。如果需要将UI融入3D世界（如显示在游戏内的显示器上）或对其应用后期处理效果，可以使用Render Texture。
- 创建一个Render Texture资产。
- 在UI的Panel Settings资产中，将Target Texture指定为这个Render Texture。
- 现在，UI将不再直接渲染到屏幕，而是渲染到这张纹理上。
- 最后，你可以将这张Render Texture作为材质的贴图，应用到场景中的任意3D模型上；或者作为UGUI的Raw Image来显示，从而实现UI与3D世界的融合或被后期效果处理。
调整 UI Document中的“面板设置（Panel Settings）”，将目标纹理发送到新的 Render Texture。
性能警告：Render Texture的开销较大，应谨慎使用。
- 主题化 (Themes)
通过Theme Style Sheets (TSS) 文件，可以轻松地为游戏实现多套视觉主题（如日间/夜间模式、季节性皮肤等）。一个TSS文件可以包含多个USS文件的引用。在运行时，只需在Panel Settings中切换不同的Theme Style Sheet，即可实现整个UI的“一键换肤”。
6.命名规范（Naming Conventions）
由于开发团队将引用你创建的 UXML 和 USS 资源，因此为视觉元素和样式表制定命名规范非常重要。命名规范有助于在 UI Builder 中保持层级结构的组织性。
你可以通过类型和/或名称查询视觉树中的元素（“root”表示树的根节点）。
开发人员通常使用字符串标识符查询视觉元素和样式表。良好的命名规范可以减少错误，提高代码可读性。
虽然不是强制要求，但我们推荐使用 BEM（块-元素-修饰符）命名规范 来命名视觉元素和样式表。通过 BEM 风格的名称，你可以一眼看出某个元素的用途、位置及其与其他元素的关系。
BEM 命名示例：
menu__home-buttonmenu__shop-buttonmenu__shop-button--smallbutton-labelbutton-label--selected
这些示例使用了连字符分隔（也称为“kebab case”），这在 CSS 命名中很常见。团队可以根据需要选择最适合的命名方式，但建议在项目早期确定命名规范，并保持一致性。
通过对UI Toolkit样式系统的深入探索，我们看到了一套与UGUI截然不同的、强大、灵活、且高度工程化的视觉构建体系。以USS选择器为核心的规则驱动模式、以内联样式为补充的覆盖机制、以过渡动画为亮点的动态表现力，共同构成了UI Toolkit在“表演性”上的核心竞争力。掌握这套体系，开发者将能以更低的维护成本，构建出更美观、更一致、更具动态美的现代UI界面。