루핑 전환 만들기

버전: 2022.1+

이 예시는 TransitionEndEvent를 활용하여 루핑되는 전환을 만드는 방법을 보여 줍니다.

개요 예시

이 예시에서는 두 개의 루핑 애니메이션을 보여 줍니다.

• Yo-yo: 루프가 상태 A에서 시작하여 전환과 함께 상태 B로 바뀐 다음, 전환과 함께 다시 상태 A로 돌아갑니다.
• A-to-B: 루프가 상태 A에서 시작하여 전환과 함께 상태 B로 바뀐 다음, 전환 없이 다시 상태 A로 돌아갑니다.

이 예시에서 만든 완성된 파일은 이 GitHub 저장소에서 찾을 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 가이드입니다. 시작하기 전에 먼저 다음을 숙지하십시오.

• UXML
• USS 전환
• 전환 이벤트

예시 생성

1. 임의의 템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.

2. 프로젝트 창에서 loop-transition-example이라는 폴더를 만듭니다.

3. 폴더를 오른쪽 클릭하고 Create > UI Toolkit > Editor Window를 선택합니다.

4. UI Toolkit Editor Window Creator 창에 LoopingExample을 입력합니다.

5. 변경 사항을 저장합니다. 그러면 LoopingExample.cs, LoopingExample.uss, LoopingExample.uxml 같은 3개의 파일이 생성됩니다.

6. LoopingExample.cs를 다음 내용으로 바꿉니다.

   using UnityEditor;
   using UnityEngine;
   using UnityEngine.UIElements;
   public class LoopingExample : EditorWindow
   {
       [SerializeField] private VisualTreeAsset m_VisualTreeAsset = default;
       private Label _yoyoLabel;
       private Label _a2bLabel;
       [MenuItem("Window/UI Toolkit/Transition Looping Example")]
       public static void ShowExample()
       {
           var wnd = GetWindow<LoopingExample>();
           wnd.titleContent = new GUIContent("TransitionStyle");
       }
       public void CreateGUI()
       {
           VisualElement root = rootVisualElement;
           VisualElement asset = m_VisualTreeAsset.Instantiate();
           root.Add(asset);
           SetupYoyo(root);
           SetupA2B(root);
       }
       // This method powers the yo-yo loop.
       private void SetupYoyo(VisualElement root)
       {
           _yoyoLabel = root.Q<Label>(name: "yoyo-label");
           // When the animation ends, the callback toggles a class to set the scale to 1.3 
           // or back to 1.0 when it's removed.
           _yoyoLabel.RegisterCallback<TransitionEndEvent>(evt => _yoyoLabel.ToggleInClassList("enlarge-scale-yoyo"));
           // Schedule the first transition 100 milliseconds after the root.schedule.Execute method is called.
           root.schedule.Execute(() => _yoyoLabel.ToggleInClassList("enlarge-scale-yoyo")).StartingIn(100);
       }
       // This method powers the A-to-B cycle.
       private void SetupA2B(VisualElement root)
       {
           _a2bLabel = root.Q<Label>(name:"a2b-label");
           _a2bLabel.RegisterCallback<TransitionEndEvent>(evt =>
           {
               _a2bLabel.RemoveFromClassList("enlarge-scale-a2b");
               _a2bLabel.schedule.Execute(() => _a2bLabel.AddToClassList("enlarge-scale-a2b")).StartingIn(10);
           });
           _a2bLabel.schedule.Execute(() => _a2bLabel.AddToClassList("enlarge-scale-a2b")).StartingIn(100);
       }
   }
   

7. LoopingExample.uxml을 다음 내용으로 바꿉니다.

   <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" 
            xsi="http://www.w3.org/2001/XMLSchema-instance" 
            engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" 
            noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" 
            editor-extension-mode="False">
       <Style src="LoopingExample.uss" />
       <ui:VisualElement name="container">
           <ui:VisualElement>
                   <ui:Label text="Yo-yo Transition" name="yoyo-label" class="text-style" />
           </ui:VisualElement>
           <ui:VisualElement>
                   <ui:Label text="A-to-B Transition" name="a2b-label" class="text-style"/>
           </ui:VisualElement>
       </ui:VisualElement>
   </ui:UXML>
   

8. LoopingExample.uss를 다음 내용으로 바꿉니다.

       #yoyo-label{
           transition-duration: 3s;
       }
   
       .text-style {
           font-size: 20px;
           flex-grow: 0;
           margin: 20px; 
       }
   
       .enlarge-scale-a2b{
           scale: 1.5 1.5;
           transition-duration: 3s;
       }
           
       .enlarge-scale-yoyo{
           scale: 1.5 1.5;
       }
   
       #container{
           flex-grow:1;
           justify-content: space-around;
           align-items: center;
       }
   

9. 이 예시를 테스트해 보려면 메뉴에서 Window > UI Toolkit > Transition Looping Example을 선택합니다.

추가 리소스

• USS
• 이벤트 처리
• 전환 이벤트 만들기
• UI 빌더 및 C# 스크립트를 사용하여 간단한 전환 만들기