← UI системы Шаг 149 из 317

USS переход

Переходы USS похожи на переходы CSS. Переход USS изменяет значения свойств в течение определенной продолжительности. Вы можете использовать переход USS для создания анимации, которая изменяет внешний вид визуального элемента. Например, вы можете использовать переход 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. Если вы попытаетесь перейти от этого значения к процентному значению, переход не сработает.

Следующий пример перехода смещает визуальный элемент влево на 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. Обратный переход может быть быстрее. Для более подробной информации см. Быстрое возвращение прерванных переходов

События переходного периода

События перехода генерируются переходами. Их можно использовать для определения начала и окончания перехода. Например, см. Создание события перехода.

Подсказки по использованию

Свойство Usage Hints предоставляет набор properties для оптимизации. С его помощью можно сократить количество вызовов отрисовки и повторных построений геометрии.

Примечание: Задайте подсказки по использованию во время редактирования или перед добавлением элемента в панель. Когда переход начинается, система может автоматически добавить отсутствующие подсказки по использованию, чтобы избежать восстановления геометрии в каждом кадре. Однако это приводит к снижению производительности на один кадр, поскольку данные отображения для VisualElement и его потомков восстанавливаются.

Органы управления переходами в UI Builder

Вы можете использовать элементы управления в разделе Transition Animations в Inspector в UI Builder для установки правил перехода для визуального элемента. Вы можете установить несколько переходов для визуального элемента. Чтобы добавить еще один переход, выберите Add Transition. Чтобы удалить переход, выберите кнопку Remove (−).

Этот переход заставляет визуальный элемент изменять свой масштаб в течение 500 миллисекунд линейным образом после задержки в 20 миллисекунд.

Переходное свойство

Свойство перехода определяет, к каким свойствам USS применяется переход.

Ключевые слова

Свойство transition поддерживает следующие ключевые слова:

all: Применяет переходы ко всем свойствам и переопределяет предыдущие переходы. Это значение по умолчанию.
initial: Применяет переходы ко всем свойствам.
none: Игнорирует переходы для всех свойств.
ignored: Игнорирует переходы для указанной длительности, задержки и функции смягчения.

Анимация

Вы можете применять переходы к большинству свойств USS. Однако анимация для некоторых свойств отличается. Анимация свойств USS подпадает под следующие категории:

Полностью анимированный: Поддерживает переход от начального значения к конечному значению, со скоростью, которая следует за функцией смягчения и продолжительностью перехода.
Дискретный: Поддерживает переход между значениями в одном шаге от начального значения до конечного значения.
Неоживляемые: Не поддерживает переход.

Чтобы узнать о возможности анимирования каждого свойства, см. USS ссылка на свойство.

Примечание: Рекомендуется использовать переходы со свойствами USS преобразование. Хотя вы можете использовать переходы на других свойствах USS, это может привести к анимации с низкой частотой кадров, потому что изменения значений этих свойств могут вызвать перерасчеты макета. Перерасчеты макета в каждом кадре могут замедлить частоту кадров вашей анимации перехода. Все свойства цвета, такие как color, background-color, tint и 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 — это структура, которую можно construct из струны. StyleList — это структура, которую можно construct из списка 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 — это структура, которую можно construct из числа и TimeUnit enum. StyleList — это структура, которую можно construct из списка 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 — это структура, которую можно construct от EasingMode enum.

//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 — это структура, которую можно construct из числа и TimeUnit enum. StyleList — это структура, которую можно construct из списка 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 миллисекунд, задержку 0 секунд и функцию linear easing.
Второй переход относится к свойству 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 ссылка на свойства