루핑 전환 만들기

버전:2022.1+

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

개요 예시

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

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

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

선행 조건

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

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

예시 생성

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

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

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

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

5. 변경 사항을 저장합니다.이렇게 하면 LoopingExample.cs, LoopingExample.uss, LoopingExample.uxml로 세 개의 파일이 생성됩니다.

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
• 이벤트 처리
• 전환 이벤트 만들기
• 커스텀 에디터 창에서 전환 만들기