推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

USS 过渡

USS 过渡在给定持续时间内更改属性值。与 CSS 过渡类似，用户界面
Toolkit 支持许多缓动函数、可变转换持续时间和可配置的转换延迟。您可以更改过渡的外观，并调整过渡发生的顺序。您可以使用缓动函数在过渡的任何时间触发离散动画。

重要提示：

• 对于提供值和单位的属性，请确保起始值的单位与结束值的单位匹配。特别注意与默认值之间的转换。例如，属性的默认值为 。这隐式使用translate0像素
  作为其单位。如果尝试从此值转换为以百分比表示的值，则会出现单位不匹配。它们之间没有一致转换的单位（如像素和百分比）容易受到单位不匹配的影响。translate
• 当属性的当前状态与以前的状态不同时，将触发帧上的过渡动画。中的第一帧现场
  没有以前的状态;因此，必须在第一帧之后开始过渡动画。
• 为视觉元素
  在层次结构中，如果为继承的属性设置转换，则 USS 转换的行为与 CSS 过渡中的行为相同，例如，应用于父元素的转换级联到子元素。若要了解继承的属性，请参阅 USS 属性参考。color
• 当不完整的过渡被中断时，USS 过渡的行为与 CSS 过渡中的行为相同，反向过渡可能会更快。

过渡包括以下属性：

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

UI 生成器中的过渡控件

您可以使用检查员
以设置可视元素的过渡规则。您可以在一个视觉元素上设置多个过渡效果。要添加其他过渡，请单击添加过渡。要删除它，请单击减号。

财产

属性控件设置转换应用于的属性。要使用它，请从下拉列表中选择关键字或 USS 属性名称。下拉列表有一个搜索栏，可用于查找特定关键字或 USS 属性名称。

注： 如果选择“忽略”，Unity 将忽略为指定的持续时间、延迟和缓动功能定义的过渡。

期间

“持续时间”控件设置持续时间属性。要使用它，请在文本框中输入一个值并指定单位，或在单位选择器中选择初始。

提示： 您可以在值之后输入或输入值，也可以输入 .这将自动更改单位选择器中显示的单位。您还可以拖动以定义文本框中的值。smsinitial

宽松

缓动控件设置缓动函数属性。若要使用它，请从下拉列表中选择一个缓动函数名称。

延迟

延迟控件设置延迟属性。要使用它，请在文本框中输入一个值并指定单位，或在单位选择器中选择初始。

提示： 您可以在值之后输入或输入值，也可以输入 .这将自动更改单位选择器中显示的单位。您还可以拖动以定义文本框中的值。smsinitial

美国航空母舰过渡属性

可以使用样式规则设置可视元素的过渡属性。您可以在 USS 文件中设置样式规则，也可以在 UXML 文件中内联设置样式规则。

transition-property

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

下表列出了 支持的关键字：transition-property

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

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

注： Unity 建议您在 USS 变换属性中使用过渡。尽管可以在其他 USS 属性上使用过渡，但这可能会导致动画的帧速率较差，因为这些属性的值更改可能会导致布局重新计算。在每一帧中重新计算布局可能会降低过渡动画的帧速率。

例子

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

transition-duration

您可以为数字提供单位、关键字或逗号分隔的数字和单位列表。

如果提供多个值，则每个值都适用于 中指定的相应属性。transition-property

transition-duration仅支持关键字 （）。不能在逗号分隔的列表中使用此关键字。initial0s

例子

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

在以下示例中，缩放的原始持续时间为 1 秒，但将其覆盖为 2 秒。all

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

transition-timing-function

可以提供缓动函数、关键字或以逗号分隔的缓动函数列表。

如果提供多个值，则每个值都适用于 中指定的相应属性。transition-property

transition-timing-function仅支持关键字 。它等于 。不能在逗号分隔的列表中使用此关键字。initialease

UI 工具包支持以下缓动功能：

• 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 的文档以获取转换时序函数 CSS 属性或 easings.net。

例子

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

transition-delay

您可以为数字提供单位、关键字或逗号分隔的数字和单位列表。

如果提供多个值，则每个值都适用于 中指定的相应属性。transition-property

transition-delay仅支持关键字 （）。不能在逗号分隔的列表中使用此关键字。initial0s

例子

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

transition

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

1. transition-property
2. transition-delay
3. transition-duration
4. transition-timing-function

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

• transition-delay:0s
• transition-duration:0s
• transition-property:initial
• transition-timing-function:ease

例子

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

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

C# 属性

可以在 C# 脚本中设置可视元素的过渡属性。

IStyle.transitionProperty

IStyle.transitionProperty 属性设置应用转换的 USS 属性。

该属性的类型为 。StylePropertyName 是一个可以从字符串构造的结构。样式列表是一个结构，您可以从 s 列表构造。transitionPropertyStyleList<StylePropertyName>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" };

IStyle.transitionDuration

属性设置可视元素上过渡的持续时间。

该属性的类型为 。时间值是一个结构，您可以从数字和时间单位枚举构造。样式列表是一个结构，您可以从 s 列表构造。transitionDurationStyleList<TimeValue>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) };

IStyle.transitionTimingFunction

属性为可视元素上的过渡设置缓动函数。

该属性的类型为 。EasingFunction 是一个结构，您可以从 EasingMode 枚举构造。transitionTimingFunctionStyleList<EasingFunction>

例

//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 };

IStyle.transitionDelay

属性设置可视元素上过渡的延迟。

该属性的类型为 。时间值是一个结构，您可以从数字和时间单位枚举构造。样式列表是一个结构，您可以从 s 列表构造。transitionDelayStyleList<TimeValue>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.transitionDuration = new StyleList<TimeValue>(delays);

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

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

更多示例

本节包括对多个属性应用过渡的示例。

示例 1：此示例对 和 属性应用转换：scaletransform-origin

• 第一个过渡是在属性上。它的持续时间为 、 的延迟和缓动函数。scale4s0sease-in-sine
• 第二个过渡是在属性上。它的持续时间为 、 的延迟和缓动函数。transform-origin3s600msease-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
• 第二个过渡是在属性上。它覆盖过渡的持续时间为 、 的延迟和缓动函数。所有其他属性的持续时间仍为 、 的延迟和缓动函数。translate1s1sease-in500ms0slinear

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

例3：

此示例演示当属性值列表具有不同长度时会发生什么情况。如果任何属性的值列表短于 for 的值列表，Unity 将重复其值以使其匹配。同样，如果任何属性的值列表比 长 ，Unity 会截断它。transition-propertytransition-property

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

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

重要： 、 、 和 是单独的 USS 属性。如果未定义其中任何一个，则它们可能在其他地方定义，例如在另一个 USS 规则中或在 UXML 元素上内联。transition-propertytransition-durationtransition-delaytransition-timing-function

由3D建模学习工作室整理翻译，转载请注明出处！

上一篇：Unity3D ：USS 转换 (mvrlink.com)

下一篇：Unity3D ：USS属性参考 (mvrlink.com)