USS 变换

USS 属性参考

USS 过渡

USS 过渡类似于 CSS 过渡。USS 过渡会在给定持续时间内更改属性值。您可以使用 USS 过渡来创建更改视觉元素外观的动画。例如，您可以使用__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary 过渡来创建当用户将光标悬停在 UI 元素上时改变大小或颜色的 UI 元素。

您可以使用 UI Builder、USS 文件或 C# 脚本中的控件来设置视觉元素的过渡属性。

下表列出了过渡属性及其相应的 C# 方法：

属性	C# 方法	描述
`transition-property`	`IStyle.transitionProperty`	过渡应用于哪些 USS 属性。
`transition-duration`	`IStyle.transitionDuration`	完成过渡所需的时间。
`transition-timing-function`	`IStyle.transitionTimingFunction`	属性随时间推移在值之间移动的方式。
`transition-delay`	`IStyle.transitionDelay`	过渡何时开始。
`transition`		`transition-property`、`transition-duration`、`transition-timing-function` 和 `transition-delay` 的简写。

过渡开始

如果在样式上设置了过渡持续时间并且样式值发生更改，则会触发过渡。您可以使用伪类、C# 方法或事件来触发过渡。

注意：当属性的当前状态与先前状态不同时，触发帧上的过渡动画。场景的第一帧没有先前的状态。必须在第一帧之后开始过渡动画。

以下过渡示例会更改将鼠标悬停在标签上时标签的颜色和旋转。过渡的持续时间为 2 秒。

要实现此示例，请执行以下操作：

设置视觉元素的过渡属性。
设置过渡持续时间。
设置开始和结束样式值。

USS 示例如下所示：

/* Set the transition properties, duration, and start style values. */
.labelClass {
    transition-property: color, rotate;
    transition-duration: 2s;
    color: black;
}

/* The Label:hover triggers the transition. Set the end values for the trigger. */
.labelClass:hover {
    rotate: 10deg;
    color: red;
}

注意：该示例在元素上而不是在 :hover 上设置过渡。如果在 :hover 上设置过渡，则光标离开元素时过渡不起作用。

要了解如何使用 C# 事件触发过渡，请参阅使用 UI Builder 和 C# 脚本创建简单过渡。

匹配值单位

对于使用值和单位设置的属性，请确保单位匹配。特别注意至默认值或自默认值的过渡。例如，translate 属性的默认值为 0px。如果尝试从该值过渡到百分比值，过渡将不起作用。

以下过渡示例在 2 秒内将视觉元素向左偏移 50px。left 属性的默认值为 auto。必须显式将单位设置为 0px 才能使过渡正常工作。

USS 示例如下所示：

.boxClass:hover {
    left: 50px;
}

.boxClass {
    transition-property: left;
    transition-duration: 2s;
    transition-timing-function: ease-in-out-sine;
    left: 0px;
}

继承属性的过渡

对于层级结构中的视觉元素，USS 过渡的行为与 CSS 过渡相同。如果为继承的属性（例如 color）设置过渡，则应用于父元素的过渡将级联到子元素。要了解继承了哪个属性，请参阅 USS 属性参考。

中断过渡

未未完成过渡为 interruptedSame 时，USS 过渡的行为与 CSS 过渡相同。反向过渡可能更快。有关更多信息，请参阅更快地逆转中断过渡

过渡事件

过渡事件由过渡生成。您可以使用过渡事件来检测过渡的开始和结束时间。有关示例，请参阅创建过渡事件。

使用提示

使用提示提供了一组用于优化的属性。您可以用它减少绘制调用和几何体重新生成。

注意：在编辑时或在将元素添加到面板之前设置使用提示。过渡开始时，系统可能会自动添加缺失的相关使用提示，以避免在每一帧中重新生成几何体。但是，这会导致单帧性能下降，因为 VisualElement 及其后代的渲染数据会重新生成。

UI Builder 中的过渡控件

您可以使用 UI Builder 中检视面板的 Transition Animations 部分中的控件为视觉元素设置过渡规则。可以在视觉元素上设置多个过渡。要添加另一个过渡，请选择添加过渡 (Add Transition)。要删除过渡，请选择移除 (−) (Remove (−)) 按钮。

过渡属性

过渡属性定义过渡应用于哪些 USS 属性。

关键字

transition 属性支持以下关键字：

all：将过渡应用于所有属性并覆盖所有先前的过渡。这是默认值。
initial：将过渡应用于所有属性。
none：忽略所有属性的过渡。
ignored：忽略指定持续时间、延迟和缓动函数的过渡。

动画性

您可以将过渡应用于大多数 USS 属性。但是，某些属性的动画性有所不同。USS 属性的动画性分为以下类别：

完全可动画化：支持从开始值到结束值的过渡，速度遵循缓动函数和过渡持续时间。
离散：支持从起始值到结束值一步过渡。
不可动画化：不支持过渡。

要了解每个属性的动画性，请参阅 USS 属性参考。

注意：建议将过渡与 USS 变换属性结合使用。虽然可以在其他 USS 属性上使用过渡，但可能会产生帧率较低的动画，因为这些属性的值更改可能会导致重新计算布局。每帧中的布局重新计算可能会减慢过渡动画的帧率。所有颜色属性（例如 color、background-color、色调和 opacity）也有一个快速通道来阻止几何体的重新生成。

USS 示例

您可以向 transition-property 提供单个 USS 属性、一个关键字或以逗号分隔的列表。

transition-property: scale;
transition-property: translate, all, rotate;
transition-property: initial;
transition-property: none;

C# 示例

IStyle.transitionProperty 属性的类型为 StyleList<StylePropertyName>。StylePropertyName 是一个可以从字符串构造的结构。StyleList 是一个可以从 StylePropertyName 列表构造的结构。

//Create a list that contains the rotate property, and use it to set transitionProperty.
List<StylePropertyName> properties = new List<StylePropertyName>();
properties.Add(new StylePropertyName("rotate"));
//Given a VisualElement named "element"...
element.style.transitionProperty = new StyleList<StylePropertyName>(properties);

您可以使用隐式转换来简化上述代码，如下所示：

//Given a VisualElement named "element"...
element.style.transitionProperty = new List<StylePropertyName> { "rotate" };

过渡持续时间

过渡持续时间设置完成过渡所需的时间。

关键字

过渡持续时间支持以下关键字：

initial：将持续时间设置为 0s。这是默认值。

USS 示例

您可以向 transition-duration 提供带有单位、关键字或以逗号分隔的数字和单位列表的数字。

transition-duration: 2s;
transition-duration: 800ms;
transition-duration: 3s, 1500ms, 1.75s;
transition-duration: initial;

如果提供多个值，则每个值适用于 transition-property 中指定的相应属性。在以下示例中，缩放的原始持续时间为 1s，但 all 会将其覆盖为 2s。

transition-property: scale, all, rotate;
transition-duration: 1s, 2s, 3s;

C# 示例

IStyle.transitionDuration 属性的类型为 StyleList<TimeValue>。TimeValue 是一个可以从数字和 TimeUnit 枚举构造的结构。StyleList 是一个可以从 TimeValue 列表构造的结构。

//Create a list that contains durations 2s and 500ms and use it to set transitionDuration.
List<TimeValue> durations = new List<TimeValue>();
durations.Add(new TimeValue(2f, TimeUnit.Second));
durations.Add(new TimeValue(500f, TimeUnit.Millisecond));
//Given a VisualElement named "element"...
element.style.transitionDuration = new StyleList<TimeValue>(durations);

您可以使用隐式转换来简化上述代码，如下所示：

//Given a VisualElement named "element"...
element.style.transitionDuration = new List<TimeValue> { 2, new (500, TimeUnit.Millisecond) };

过渡时序函数

过渡时序函数设置属性随时间推移在值之间移动的方式。

关键字

过渡时序函数支持以下关键字。默认值为 initial，会将缓动函数设置为 ease。

initial
ease
ease-in
ease-out
ease-in-out
linear
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-circ
ease-out-circ
ease-in-out-circ
ease-in-elastic
ease-out-elastic
ease-in-out-elastic
ease-in-back
ease-out-back
ease-in-out-back
ease-in-bounce
ease-out-bounce
ease-in-out-bounce

有关每个函数的详细信息，请参阅 MDN 文档的 transition-timing-function CSS 属性或 easings.net。

USS 示例

您可以向 transition-timing-function 提供缓动函数、关键字或用逗号分隔的缓动函数列表。

transition-timing-function: linear;
transition-timing-function: ease-in, ease-out-circ, ease-in-out-cubic;
transition-timing-function: initial;

C# 示例

IStyle.transitionTimingFunction 属性的类型为 StyleList<EasingFunction>。EasingFunction 是一种可以从 EasingMode 枚举构造的结构。

//Create a list that contains the Linear easing function, and use it to set transitionTimingFunction.
List<EasingFunction> easingFunctions = new List<EasingFunction>();
easingFunctions.Add(new EasingFunction(EasingMode.Linear));
//Given a VisualElement named "element"...
element.style.transitionTimingFunction = new StyleList<EasingFunction>(easingFunctions);

您可以使用隐式转换来简化上述代码，如下所示：

//Given a VisualElement named "element"...
element.style.transitionTimingFunction = new List<EasingFunction> { EasingMode.Linear };

过渡延迟

过渡延迟设置过渡何时开始。

关键字

过渡延迟支持以下关键字：

initial：将延迟设置为 0s。这是默认值。

USS 示例

您可以向 transition-delay 提供带有单位、关键字或以逗号分隔的数字和单位列表的数字。

transition-delay: 0s;
transition-delay: 300ms;
transition-delay: 2s, 650ms, 2.75s;
transition-delay: initial;

C# 示例

IStyle.transitionDelay 属性的类型为 StyleList<TimeValue>。TimeValue 是一个可以从数字和 TimeUnit 枚举构造的结构。StyleList 是一个可以从 TimeValue 列表构造的结构。

//Create a list that contains delays 0.5s and 200ms, and use it to set transitionDelay.
List<TimeValue> delays = new List<TimeValue>();
delays.Add(new TimeValue(0.5f, TimeUnit.Second));
delays.Add(new TimeValue(200f, TimeUnit.Millisecond));
//Given a VisualElement named "element"...
element.style.transitionDelay = new StyleList<TimeValue>(delays);

您可以使用隐式转换来简化上述代码，如下所示：

//Given a VisualElement named "element"...
element.style.transitionDelay = new List<TimeValue> { 0.5f, new(200, TimeUnit.Millisecond) };

USS `transition`

您可以向 transition 提供一个过渡、一个关键字或以逗号分隔的过渡列表。按以下顺序将过渡中的属性用空格分隔：

transition-property
transition-delay
transition-duration
transition-timing-function

关键字

transition 仅支持关键字 initial，它表示每个过渡属性的初始值：

transition-delay: 0s
transition-duration: 0s
transition-property: all
transition-timing-function: ease

USS 示例

/*One transition*/
transition: width 2s ease-out;

/*Two transitions*/
transition: margin-right 4s, color 1s;

多个属性过渡示例

本节包含在多个属性上应用过渡的示例。

示例 1

此示例对 scale 和 transform-origin 属性应用过渡：

第一个过渡位于 scale 属性上。它具有 4s 持续时间、0s 延迟和 ease-in-sine 缓动功能。
第二个过渡位于 transform-origin 属性上。它具有 3s 持续时间、600ms 延迟和 ease-out-elastic 缓动功能。

.classA {
    transition-property: scale, transform-origin;
    transition-duration: 4s, 3s;
    transition-delay: 0s, 600ms;
    transition-timing-function: ease-in-sine, ease-out-elastic;
}

示例 2

在此示例中，后面的过渡会覆盖前面的过渡，包括带有 all 关键字的过渡：

第一个过渡位于所有属性上。它应用 500 毫秒的持续时间、零秒延迟和 linear 缓动函数。
第二个过渡位于 translate 属性上。它使用 1s 持续时间、1s 延迟和 ease-in 缓动函数覆盖过渡。所有其他属性仍然具有 500ms 持续时间、0s 延迟和 linear 缓动函数。

.classB {
    transition-property: all, translate;
    transition-duration: 500ms, 1s;
    transition-delay: 0s, 1s;
    transition-timing-function: linear, ease-in;
}

示例 3

此示例显示了当属性值列表具有不同长度时会发生什么。如果任何属性的值列表都比 transition-property 属性的值列表短，Unity 会重复其值以使其匹配。同样，如果任何属性的值列表的长度超过 transition-property，Unity 会将其截断。

.classC {
    transition-property: scale, rotate, translate;
    transition-duration: 1s, 2s;
    transition-delay: 1s, 2s, 3s, 4s, 5s, 6s, 7s;
}

下表显示了以上示例的最终结果：

属性	Duration	Delay	缓动函数
`scale`	`1s`	`1s`	`ease`
`rotate`	`2s`	`2s`	`ease`
`translate`	`1s`	`3s`	`ease`

重要：transition-property、transition-duration、transition-delay 和 transition-timing-function 是单独的 USS 属性。如果未定义其中任何一个，则可能在其他位置定义了这些属性，例如在另一个 USS 规则或 UXML 元素的内联中。

其他资源

使用使用提示减少绘制调用和几何体重新生成
使用 CSS 过渡（Mozilla 开发者文档）
CSS 过渡（Mozilla 开发者文档）
CSS 过渡属性（Mozilla 开发者文档）
CSS 过渡持续时间属性（Mozilla 开发者文档）
CSS 过渡时序函数属性（Mozilla 开发者文档）
CSS 过渡延迟属性（Mozilla 开发者文档）

USS 变换

USS 属性参考

Unity 手册

USS 过渡

过渡开始

匹配值单位

继承属性的过渡

中断过渡

过渡事件

使用提示

UI Builder 中的过渡控件

过渡属性

关键字

动画性

USS 示例

C# 示例

过渡持续时间

关键字

USS 示例

C# 示例

过渡时序函数

关键字

USS 示例

C# 示例

过渡延迟

关键字

USS 示例

C# 示例

USS transition

关键字

USS 示例

多个属性过渡示例

示例 1

示例 2

示例 3

其他资源

USS `transition`