Unity UI Toolkit의 USS 전환
이 문서에서는 Unity의 UI Toolkit에서 제공하는 USS 전환에 대해 설명합니다. 이를 통해 UI 요소의 스타일을 동적으로 변화시키는 방법을 배울 수 있습니다.
USS 전환 개요
USS 전환은 특정 시간 동안 UI 프로퍼티 값을 변경할 수 있게 해주는 기능입니다. CSS 전환과 유사하며, 다양한 easing 함수와 전환 기간을 지원하여 UI 변화의 디자인을 조정할 수 있습니다.
주요 프로퍼티
| 프로퍼티 | 설명 |
|---|---|
transition-property |
전환 효과를 적용할 USS 프로퍼티의 이름을 지정합니다. 기본값은 all입니다. |
transition-duration |
전환 효과를 완료하는 데 걸리는 시간을 설정합니다. 기본값은 0s입니다. |
transition-timing-function |
시간 경과에 따라 프로퍼티 값이 변하는 방식을 정의합니다. 기본값은 ease입니다. |
transition-delay |
전환 효과가 시작되는 시점을 설정합니다. 기본값은 0s입니다. |
transition |
여러 전환 프로퍼티를 짧게 적용하는 구문입니다. |
전환 설정 방법
UI 빌더, USS 파일 또는 C# 스크립트에서 시각적 요소의 전환 속성을 설정할 수 있습니다.
1. UI 빌더에서 전환 설정
- UI 빌더의 Inspector에서
Transition Animations섹션을 사용하여 전환 규칙을 설정합니다. - 여러 개의 전환을 추가하거나 제거할 수 있습니다.
2. USS 파일에서 전환 설정 예시
transition-property: scale, translate;
transition-duration: 2s, 1s;
transition-timing-function: ease-in-out, linear;
C# 스크립트에서 전환 설정
C# 스크립트를 통해 전환 프로퍼티를 설정할 수 있습니다.
List<StylePropertyName> properties = new List<StylePropertyName>();
properties.Add(new StylePropertyName("scale"));
element.style.transitionProperty = new StyleList<StylePropertyName>(properties);
유의사항
전환 시 만족해야 할 조건이 있습니다:
- 값과 단위를 일치시켜야 하며, 시작 값과 끝 값의 단위가 동일해야 합니다.
- 씬의 첫 번째 프레임에서는 이전 상태가 없기 때문에 전환 애니메이션의 시작은 첫 번째 프레임 이후에 이루어져야 합니다.
응용 예제
예제 1: 간단한 스케일 전환
视图 요소의 크기를 부드럽게 변경하는 전환을 다음과 같이 설정할 수 있습니다.
element.style.transitionProperty = new List<StylePropertyName> { "scale" };
element.style.transitionDuration = new List<TimeValue> { 1.5f, TimeUnit.Second };
element.style.transitionTimingFunction = new List<EasingFunction> { EasingMode.EaseInOut };
예제 2: 여러 전환 속성
여러 프로퍼티에 전환을 지정할 수 있습니다. 예를 들어:
element.style.transitionProperty = new List<StylePropertyName> { "color", "background-color" };
element.style.transitionDuration = new List<TimeValue> { new TimeValue(3f, TimeUnit.Second), new TimeValue(1f, TimeUnit.Second) };
이 예제는 색상과 배경 색상이 각각 3초와 1초 동안 부드럽게 변화합니다.
추가 리소스
이 문서를 통해 USS 전환에 대한 이해가 깊어지기를 바랍니다. UI 요소의 동적인 변화로 사용자의 경험을 향상시킬 수 있습니다!