Version: 2023.2
Create a transition event
UI Renderer

Create looping transitions

Version: 2022.1+

This example demonstrates how to leverage the TransitionEndEvent to create transitions that loop.

Example overview

This example demonstrates two looping animations:

  • Yo-yo: The loop starts from state A to state B with transition, and then return back to state A with transition.
  • A-to-B: The loop starts from state A to state B with transition, and then return back to state A without transition.
Window shows a yo-yo and a A-to-B loop transition effects
Window shows a yo-yo and a A-to-B loop transition effects

You can find the completed files that this example creates in this GitHub repository.

先决条件

This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:

Create the example

  1. Create a project in Unity with any template.

  2. In your Project window, create a folder named loop-transition-example.

  3. Right-click in the folder, and select Create > UI Toolkit > Editor Window.

  4. In the UI Toolkit Editor Window Creator window, enter LoopingExample.

  5. Save your changes. This creates three files as LoopingExample.cs, LoopingExample.uss, and LoopingExample.uxml.

  6. Replace LoopingExample.cs with the following content:

    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. Replace LoopingExample.uxml with the following content:

    <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. Replace LoopingExample.uss with the following content:

        #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. To test the example, from the menu, select Window -> UI Toolkit -> Transition Looping Example.

其他资源

Create a transition event
UI Renderer
Copyright © 2023 Unity Technologies
优美缔软件(上海)有限公司 版权所有
"Unity"、Unity 徽标及其他 Unity 商标是 Unity Technologies 或其附属机构在美国及其他地区的商标或注册商标。其他名称或品牌是其各自所有者的商标。
公安部备案号:
31010902002961