Unity 6.3
0 онлайн 101 гостей 3 в системе
Вход
← UI системы Шаг 200 из 317

Создание циклических переходов

Версия: 2022.1+

Этот пример демонстрирует, как использовать TransitionEndEvent для создания переходов, которые повторяются.

Примерный обзор

Этот пример демонстрирует две циклические анимации:

  • Йо-йо: цикл идёт от состояния A к состоянию B через переход, а затем возвращается к состоянию A тоже через переход.
  • A-to-B: цикл начинается с перехода из состояния A в состояние B, а затем возвращается в состояние A без перехода.
Окно показывает эффекты циклических переходов Yo-yo и A-to-B
Окно показывает эффекты циклических переходов Yo-yo и A-to-B

Вы можете найти завершенные файлы, созданные этим примером, в хранилище GitHub.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

Создание примера

  1. Создайте проект в Unity с любым шаблоном.

  2. В окне Project создайте папку loop-transition-example.

  3. Щелкните папку правой кнопкой мыши и выберите Создать > UI Toolkit > Окно редактора.

  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. Чтобы проверить пример, в меню выберите Окно -> UI Toolkit -> Пример циклического перехода.

Дополнительные ресурсы

← Предыдущий шагUIE-transition-event-example