USS 트랜스폼

USS 프로퍼티 레퍼런스

USS 전환

USS 전환은 CSS 전환과 유사합니다. USS 전환은 일정 기간 동안 프로퍼티 값을 변경합니다. USS 전환을 사용하여 시각적 요소의 형상을 변경하는 애니메이션을 생성할 수 있습니다. 예를 들어__ UI__(사용자 인터페이스) 사용자가 애플리케이션과 상호 작용하도록 해 줍니다. Unity는 현재 3개의 UI 시스템을 지원합니다. 자세한 정보
See in Glossary 전환을 사용하여 사용자가 커서를 위에 올려 놓을 때 크기나 컬러를 변경하는 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입니다. 이 값에서 백분율 값으로 전환하려고 하면 전환이 작동하지 않습니다.

다음 전환 예시는 시각적 요소를 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 빌더의 전환 컨트롤

UI 빌더 내 인스펙터의 Transition Animations 섹션에 있는 컨트롤을 사용하여 시각적 요소에 대한 전환 규칙을 설정할 수 있습니다. 시각적 요소에 여러 전환을 설정할 수 있습니다. 다른 전환을 추가하려면 Add Transition을 선택합니다. 전환을 제거하려면 Remove (−) 버튼을 선택합니다.

이 전환은 시각적 요소가 20밀리초의 지연 후 선형적 방식으로 500밀리초에 걸쳐 스케일을 조정하도록 합니다.

전환 프로퍼티

전환 프로퍼티는 전환이 적용되는 USS 프로퍼티를 정의합니다.

키워드

전환 프로퍼티는 다음 키워드를 지원합니다.

all: 모든 프로퍼티에 전환을 적용하고 이전 전환을 오버라이드합니다. 기본값입니다.
initial: 모든 프로퍼티에 전환을 적용합니다.
none: 모든 프로퍼티의 전환을 무시합니다.
ignored: 지정된 기간, 지연, easing 함수의 전환을 무시합니다.

애니메이션화 가능성

대부분의 USS 프로퍼티에 전환을 적용할 수 있습니다. 하지만 특정 프로퍼티의 애니메이션화 가능성은 다릅니다. USS 프로퍼티의 애니메이션화 가능성은 다음 카테고리로 나뉩니다.

Fully animatable: easing 함수와 전환 기간에 따라 결정된 속도로 시작 값에서 끝 값으로의 전환을 지원합니다.
Discrete: 시작 값에서 끝 값까지 한 가지 단계로 값 간 전환을 지원합니다.
Non-animatable: 전환을 지원하지 않습니다.

각 프로퍼티의 애니메이션화 가능성을 알아보려면 USS 프로퍼티 레퍼런스를 참조하십시오.

참고: 전환을 USS Transform 프로퍼티와 함께 사용하는 것이 좋습니다. 다른 USS 프로퍼티에서 전환을 사용할 수 있지만, 이러한 프로퍼티의 값 변경으로 인해 레이아웃 재계산이 발생할 수 있으므로 애니메이션의 프레임 속도가 낮아질 수 있습니다. 각 프레임에서 레이아웃 재계산을 수행하면 전환 애니메이션의 프레임 속도가 느려질 수 있습니다. color, background-color, tint 및 opacity와 같은 모든 컬러 프로퍼티에도 지오메트리의 재생성을 방지하는 빠른 패스가 있습니다.

USS 예시

단일 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) };

transition timing 함수

transition timing 함수는 시간의 흐름에 따라 프로퍼티가 값 간에 이동하는 방식을 설정합니다.

키워드

transition timing 함수는 다음 키워드를 지원합니다. 기본값은 easing 함수를 ease로 설정하는 initial입니다.

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

각 함수에 대한 자세한 내용은 transition-timing-function CSS 속성 또는 easings.net에 대한 MDN 기술자료를 참조하십시오.

USS 예시

easing 함수, 키워드, easing 함수의 쉼표로 구분된 목록을 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 easing 함수를 포함합니다.
두 번째 전환은 transform-origin 프로퍼티에 해당되며 3s만큼의 시간, 600ms 지연, 그리고 ease-out-elastic easing 함수를 포함합니다.

.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 키워드를 사용한 전환을 포함하여 이전 전환을 이후의 전환이 오버라이드합니다.

첫 번째 전환은 모든 프로퍼티에 적용되며 500ms의 시간, 0s의 지연 및 linear easing 함수를 적용합니다.
두 번째 전환은 translate 프로퍼티에 해당되며 1s의 시간, 1s의 지연 및 ease-in easing 함수로 전환을 오버라이드합니다. 다른 모든 프로퍼티에는 여전히 500ms의 시간, 0s의 지연, 그리고 linear easing 함수가 포함됩니다.

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

다음 표는 위의 예시에 대한 최종 결과를 나타냅니다.

프로퍼티	기간	지연	Easing function
`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 프로퍼티 레퍼런스

Unity 매뉴얼

USS 전환

전환 시작

값 단위 일치

상속된 프로퍼티의 전환

전환 중단

전환 이벤트

사용 힌트

UI 빌더의 전환 컨트롤

전환 프로퍼티

키워드

애니메이션화 가능성

USS 예시

C# 예시

전환 시간

키워드

USS 예시

C# 예시

transition timing 함수

키워드

USS 예시

C# 예시

전환 지연

키워드

USS 예시

C# 예시

USS transition

키워드

USS 예시

여러 프로퍼티의 전환 예시

예제 1

예제 2

예제 3

추가 리소스

USS `transition`