Added loop transition example code

README.md

@@ -4,16 +4,12 @@ This repo includes the code examples for the following Unity UI Toolkit docs:
 
 ## Editor UI examples
 
-- [Simple UI Toolkit workflow](https://docs.unity3d.com/Documentation/Manual/UIE-simple-ui-toolkit-workflow.html)
-- [Create a drag-and-drop UI inside a custom Editor window](https://docs.unity3d.com/Documentation/Manual/UIE-create-drag-and-drop-ui.html)
-- [Create a drag-and-drop UI to drag between Editor windows](https://docs.unity3d.com/Documentation/Manual/UIE-drag-across-windows.html)
-- [Create list and tree views](https://docs.unity3d.com/2022.1/Documentation/Manual/UIE-ListView-TreeView.html)
-- [Create a transition in a custom Editor window](https://docs.unity3d.com/2022.1/Documentation/Manual/UIE-transition-example.html)
+- [Get started with UI Toolkit](https://docs.unity3d.com/Documentation/Manual/UIE-simple-ui-toolkit-workflow.html)
 
-## Runtime UI examples
+
+## Tabbed menu examples
 
 - [Create a tabbed menu for runtime](https://docs.unity3d.com/Documentation/Manual/UIE-create-tabbed-menu-for-runtime.html)
-- [Create a list view runtime UI](https://docs.unity3d.com/Documentation/Manual/UIE-HowTo-CreateRuntimeUI.html)
 
 ## Custom controls examples
 
@@ -42,9 +38,23 @@ This repo includes the code examples for the following Unity UI Toolkit docs:
 
 ## UXML element examples
 
-- [ListView](https://docs.unity3d.com/Documentation/Manual/UIE-uxml-element-ListView.html)
 - [Toggle](https://docs.unity3d.com/Manual/UIE-uxml-element-Toggle.html)
+- [ListView](https://docs.unity3d.com/Manual/UIE-uxml-element-ListView.html)
 
-## Events examples
 
+## Transition examples
+
+- [Create a transition in a custom Editor window](https://docs.unity3d.com/2022.1/Documentation/Manual/UIE-transition-example.html)
 - [Transition events](https://docs.unity3d.com/Manual/UIE-Transition-Events.html)
+- [Create looping transitions](https://docs.unity3d.com/2023.1/Documentation/Manual/UIE-transition-event-loop-example.html)
+
+# List and tree view examples
+
+- [Create list and tree views](https://docs.unity3d.com/2022.1/Documentation/Manual/UIE-ListView-TreeView.html)
+- [Create a list view runtime UI](https://docs.unity3d.com/Documentation/Manual/UIE-HowTo-CreateRuntimeUI.html)
+
+# Drag-and-drop UI examples
+
+- [Create a drag-and-drop UI inside a custom Editor window](https://docs.unity3d.com/Documentation/Manual/UIE-create-drag-and-drop-ui.html)
+- [Create a drag-and-drop UI to drag between Editor windows](https://docs.unity3d.com/Documentation/Manual/UIE-drag-across-windows.html)
+

loop-transition-example/Editor/LoopingExample.cs

@@ -0,0 +1,44 @@
+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);
+    }
+}

loop-transition-example/Editor/LoopingExample.uss

@@ -0,0 +1,20 @@
+#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;
+}

loop-transition-example/Editor/LoopingExample.uxml

@@ -0,0 +1,15 @@
+<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>