USS变形

USS过滤器

USS 过渡

USS 转换类似于 CSS 转换。USS 转换在给定持续时间内更改属性值。您可以使用 USS 过渡创建动画，以更改视觉元素实例化或派生自 C# 的可视化树的节点VisualElement类。您可以设置外观样式、定义行为并将其作为 UI 的一部分显示在屏幕上。更多信息
请参阅术语表.例如，您可以使用 UI 过渡来制作当用户将光标悬停在 UI 元素上时更改大小或颜色的 UI 元素。

可以使用 UI 生成器、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 生成器和 C# 脚本创建简单转换。

匹配值单位

对于使用值和单位设置的属性，请确保单位匹配。特别注意与默认值的转换。例如，默认值translate属性为0px.如果尝试从此值转换为百分比值，则转换不起作用。

以下转换示例将视觉元素偏移到左侧50px超过 2 秒。默认值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 过渡相同。反向转换可能会更快。有关更多信息，请参阅更快地反转中断的过渡

过渡事件

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

使用提示

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

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

UI Builder 中的过渡控件

你可以使用过渡动画（Transition Animations）部分中的控件检查器一个 Unity 窗口，显示有关当前选定游戏对象、资产或项目设置的信息，允许您检查和编辑值。更多信息
请参阅术语表以设置视觉元素的过渡规则。您可以在视觉元素上设置多个过渡。要添加另一个过渡，请选择添加过渡。要删除过渡，请选择删除（−） 按钮。

此过渡会导致视觉元素在延迟 20 毫秒后以线性方式在 500 毫秒内调整其比例。

过渡属性

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

关键字

transition 属性支持以下关键字：

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

可动画性

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

完全可动画化：支持从开始值到结束值的过渡，速度与缓动函数和过渡持续时间一致。
离散：支持在单个步骤中从开始值到结束值的值之间转换。
不可动画：不支持过渡。

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

注意：建议将过渡与 USS 变换属性一起使用。尽管可以在其他 USS 属性上使用过渡，但可能会导致动画帧速率较低，因为这些属性上的值更改可能会导致布局重新计算。每帧中的布局重新计算可能会降低过渡动画的帧速率。所有颜色属性，例如color,background-color、色调和opacity，还具有防止几何再生的快速通道。

USS 示例

您可以向transition-property.

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-functionCSS 属性或 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;
}

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

财产	期间	延迟	缓动功能
`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 transition-property （Mozilla 开发人员文档）
CSS transition-duration 属性（Mozilla 开发人员文档）
CSS transition-timing-function 属性（Mozilla 开发人员文档）
CSS transition-delay 属性（Mozilla 开发人员文档）

USS变形

USS过滤器

手册

USS 过渡

过渡的开始

匹配值单位

继承属性的转换

中断转换

过渡事件

使用提示

UI Builder 中的过渡控件

过渡属性

关键字

可动画性

USS 示例

C# 示例

过渡持续时间

关键字

USS 示例

C# 示例

过渡时序功能

关键字

USS 示例

C# 示例

过渡延迟

关键字

USS 示例

C# 示例

USStransition

关键字

USS 示例

多个属性示例的转换

示例 1

实施例2

实施例3

其他资源

USS`transition`