创建自定义文本动画

版本：6000.3+

这TextElement.PostProcessTextVerticesAPI 允许您修改meshUnity 的主要图形原语。网格体构成了 3D 世界的很大一部分。Unity 支持三角或四边形多边形网格。Nurbs、Nurms、Subdiv 曲面必须转换为多边形。更多信息
请参阅术语表每个字形的顶点，然后 UI 工具包渲染它们。您可以使用此回调在低级别自定义文本的位置、色调和 UV 坐标。

示例概述

此示例创建一个自定义编辑器窗口，该窗口通过在按空格键时淡入淡出字形来激活文本。它使用TextElement.PostProcessTextVertices用于修改文本字形的顶点数据的 API。

您可以在此 GitHub 存储库中找到此示例创建的已完成文件。

先决条件

本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容：

TextElement

创建带有文本动画的自定义编辑器窗口

为自定义编辑器窗口创建 C# 脚本。使用计划作业来跟踪动画时间。在OnPostProcessTextVertices方法，迭代GlyphsEnumerable并调整每个顶点色调的 Alpha 通道，直到淡入淡出完成。

使用任何模板创建 Unity 项目。
创建一个名为Editor如果你没有的话。
在Editor文件夹中，创建一个名为TextAnimation.cs内容如下：

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using TextElement = UnityEngine.UIElements.TextElement;

public class TextAnimation : EditorWindow
{
    [MenuItem("Window/UI Toolkit/TextAnimation")]
    public static void ShowExample()
    {
        TextAnimation wnd = GetWindow<TextAnimation>();
        wnd.titleContent = new GUIContent("TextAnimation");
    }

    Label label;
    float animationDuration = 10f;
    float elapsed = 0f;
    IVisualElementScheduledItem animationJob;
    bool isTextVisible = true;

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;

        var container = new VisualElement()
        {
            style =
            {
                flexGrow = 1,
                top = 0,
                bottom = 0,
                right = 0,
                left = 0
            },
            focusable = true // We can only receive key events on a window with a focusable element.
        };
        label = new Label("Hello ❤️ World!") { style = { flexGrow = 1, fontSize = 24, unityTextAlign = TextAnchor.MiddleCenter } };
        container.Add(label);
        root.Add(container);

        rootVisualElement.RegisterCallback<KeyDownEvent>(evt => OnSpacebarPressed(evt), TrickleDown.TrickleDown);
        label.PostProcessTextVertices += OnPostProcessTextVertices;

        animationJob = label.schedule.Execute(UpdateTime).Every(1000 / 60); // 60 FPS
        animationJob.Pause(); // Pause the job until the animation starts
    }

    private void UpdateTime()
    {
        elapsed += Time.deltaTime;
        if (elapsed >= animationDuration)
        {
            elapsed = animationDuration; // Cap at max duration
            animationJob.Pause();
        }

        label.MarkDirtyRepaint();
    }

    public void OnSpacebarPressed(KeyDownEvent evt)
    {
        if (evt.keyCode != KeyCode.Space || animationJob.isActive)
            return;

        elapsed = 0f;
        animationJob.Resume();
        isTextVisible = !isTextVisible;
    }

    void OnPostProcessTextVertices(TextElement.GlyphsEnumerable glyphs)
    {
        int glyphsToToggle = (int)(elapsed * glyphs.Count / animationDuration);

        int toggled = 0;
        foreach (TextElement.Glyph glyph in glyphs)
        {
            if (toggled++ >= glyphsToToggle)
                break;

            var verts = glyph.vertices;
            for (int i = 0; i < verts.Length; i++)
            {
                var v = verts[i];
                var tint = v.tint;
                tint.a = isTextVisible ? (byte)255 : (byte)0;
                v.tint = tint;
                verts[i] = v;
            }
        }
    }
}

测试样品

在自定义编辑器窗口中测试文本动画示例。

从菜单中，选择“窗口”>“UI 工具包”>“文本动画”以打开示例窗口。
按空格键开始动画。

其他资源

回退字体

测试用户界面