전환 이벤트는 전환 상태의 변경 사항을 알려줍니다.
UI 툴킷은 ’VisualElement’의 스타일 프로퍼티가 수정될 때 전환을 사용합니다.VisualElement
프로퍼티에 대한 변경 사항은 즉시 시각적으로 반영됩니다.그러나 transition
USS 프로퍼티를 사용하여 초기 결과와 최종 결과 사이를 점진적으로 보간할 수 있습니다.
전환의 수명 주기에는 다음과 같은 단계가 있습니다.
다음과 같은 경우 VisualElement
의 프로퍼티가 수정됩니다.
element.ToggleInClassList()
(where element
is any VisualElement
).:hover
와 같은 선택자와 함께 USS 사용style
프로퍼티 조작예시:element.style.backgroundColor = Color.red;
(where element
is any VisualElement
).TransitionRunEvent
가 전송됩니다.
변경 프로퍼티에 대해 확인된 transition-delay
프로퍼티의 값이 0
이 아닌 경우, 지연 기간 동안 아무 일도 일어나지 않습니다.
지연 후 TransitionStartEvent
가 전송되고 프로퍼티의 초기 값으로 전환이 시작됩니다.
transition-duration
으로 설정한 시간 동안 전환이 발생합니다.이 기간 동안 프로퍼티는 초기 값에서 최종 값으로 변경됩니다.
전환 중에 프로퍼티가 새 값으로 변경되면 TransitionCancelEvent
가 전송됩니다.전환 프로세스가 2단계에서 다시 시작됩니다.
transition-duration
이 경과하면 프로퍼티가 최종 값으로 설정됩니다.TransitionEndEvent
가 전송됩니다.
다음 표에서는 전환 이벤트와 그 전파 단계에 대해 설명합니다.
이벤트 | 설명 | 트리클다운 | 버블업 | 취소 가능 |
---|---|---|---|---|
TransitionRunEvent | 전환이 생성될 때 전송됩니다. | 지원 | ||
TransitionStartEvent | 전환의 지연 단계가 끝나고 전환이 시작될 때 전송됩니다. | 지원 | ||
TransitionEndEvent | 전환이 끝날 때 전송됩니다. | 지원 | ||
TransitionCancelEvent | 전환이 취소될 때 전송됩니다. | 지원 |
각 전환 프로퍼티에는 고유한 수명 주기와 고유한 전환 이벤트가 있습니다.이벤트의 ‘stylePropertyNames’ 프로퍼티로 현재 프로퍼티에 액세스할 수 있습니다.
단축 USS 프로퍼티가 변경되면 모든 컴포넌트에도 고유한 수명 주기가 적용됩니다.예를 들어, margin
, margin-left
, margin-right
, margin-top
, margin-bottom
을 변경하면 모두 각자 고유한 TransitionRunEvent
, TransitionStartEvent
, TransitionEndEvent
를 갖게 되어 총 12개의 개별 이벤트가 생성됩니다.
transition-delay
를 0
으로 설정하면 TransitionRunEvent
와 TransitionStartEvent
가 몇 밀리초 내에 차례로 전송됩니다.
transition-delay
를 0
보다 낮은 값으로 설정하면 전환이 처음부터 시작되지 않습니다.예를 들어, ‘transition-delay’가 ’–3’초이고 transition-duration
이 ’5’초인 경우, elapsedTime
프로퍼티가 ’3’초로 설정된 ’TransitionRunEvent’와 ’TransitionStartEvent’가 전송되고 5초 애니메이션의 3초에서 전환이 효과적으로 시작됩니다.
이 섹션에서는 각 전환 이벤트의 target
, stylePropertyNames
, elapsedTime
에 대해 설명합니다.
전환이 생성될 때 TransitionRunEvent
이벤트가 전송됩니다.
target
:전환을 실행하는 요소입니다.stylePropertyNames
:전환에 의해 수정되는 프로퍼티 리스트입니다.elapsedTime
:전환이 시작된 이후의 시간입니다.전환의 지연 단계가 끝나고 전환이 시작될 때 TransitionStartEvent
이벤트가 전송됩니다.
target
:전환을 실행하는 요소입니다.stylePropertyNames
:전환에 의해 수정되는 프로퍼티 리스트입니다.elapsedTime
:전환이 시작된 이후의 시간입니다.전환이 끝날 때 TransitionEndEvent
이벤트가 전송됩니다.
target
:전환을 실행하는 요소입니다.stylePropertyNames
:전환에 의해 수정되는 프로퍼티 리스트입니다.elapsedTime
:전환이 시작된 이후의 시간입니다.다시 변경되는 프로퍼티에 의해 전환이 중단되면 TransitionCancelEvent
이벤트가 전송됩니다.
target
:전환을 실행하는 요소입니다.stylePropertyNames
:전환에 의해 수정되는 프로퍼티 리스트입니다.elapsedTime
:전환이 시작된 이후의 시간입니다.TransitionEndEvent
를 활용하여 루핑되는 전환을 만드는 방법을 보여줍니다.Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.