Между строк: Анимации в UI Toolkit

Здравствуйте, уважаемые господа. Меня зовут Линар Хилажев, я программирую логику, интерфейсы и игры.

Хочу кое-что интересное рассказать… значит начались эти события после того, как была написана статья Между строк: Создание элементов интерфейса.

Значит, потом, ну наитие такое появилось, что нужно написать определенную статью, желательно про анимацию.

Без лишних слов – встречайте: Анимации в Unity UI Toolkit.

---

Глава 1: Концепция анимации

Давайте начнем с объяснения того, как будет работать анимация для наших элементов интерфейса.

Здесь речь не идет о переходах/задержках и других встроенных возможностях анимации в UI Toolkit.

Из предыдущих статей мы уже научились создавать настраиваемые элементы пользовательского интерфейса. Теперь пришло время добавить немного динамичности.

Стоит отметить, что генерация анимации является довольно ресурсоемким процессом по сравнению с другими операциями, так как она будет нагружать процессор практически на каждом кадре.

Если разложить анимацию на базовые компоненты, то это будет изменение состояния объекта (размер, форма, цвет, положение и т.д.).

Первая задача, перед которой мы стоим, — научиться вызывать внутренние методы класса VisualElement с определенным интервалом времени.

Для этого мы будем использовать внутреннюю реализацию интерфейса IVisualElementScheduler.

Из названия можно догадаться, что оно занимается планированием и выполнением каких-то действий, давайте разбираться, как с ним работать.

public RombElement() {     schedule.execute(MethodName); } 

В этом примере кода, при создании элемента мы обращаемся к методу Execute передавая в него Action.

Это значит, что этот метод будет вызван сразу после выполнения конструктора.

Стоит понимать, что выполнен он будет только один раз, а как нам сделать многократные вызовы?

– Я рад, что вы спросили, отвечаю:

public RombElement() {     schedule.Execute(MethodName).Every(16); } 

Мы добавляем к нашему вызову .Every, что означает, наш метод будет вызываться каждые X миллисекунд.

С базой разобрались, давайте усложнять.

---

Глава 2: Анимации цвета

Под анимацией цвета мы будем обозначать изменение цвета/прозрачности и связанное с его составляющими у UI Element’a

Давайте сделаем так, чтобы наш элемент проявлялся из прозрачности.

Как и всегда, приведу весь код, а потом будет разбирать детально.

using UnityEngine; using UnityEngine.UIElements;  namespace CustomElements {     [UxmlElement]     public partial class RombElement : VisualElement     {         private float _timeLeft;                  private const float AlphaValue = 255;                  [UxmlAttribute] public float AnimationTime = 3f;          public RombElement()         {             generateVisualContent += GenerateVisualContent;              _timeLeft = AnimationTime;             schedule.Execute(ChangeColorAnimation).Every(16);         }          private void ChangeColorAnimation()         {             _timeLeft -= Time.deltaTime;                          firstColor.a = (byte)Mathf.Lerp(firstColor.a, AlphaValue, Time.fixedDeltaTime / _timeLeft);             secondColor.a = (byte)Mathf.Lerp(secondColor.a, AlphaValue, Time.deltaTime / _timeLeft);             thirdColor.a = (byte)Mathf.Lerp(thirdColor.a, AlphaValue, Time.fixedDeltaTime / _timeLeft);             fourColor.a = (byte)Mathf.Lerp(fourColor.a, AlphaValue, Time.deltaTime / _timeLeft);              MarkDirtyRepaint();         }          Vertex[] vertices = new Vertex[4];         ushort[] indices = { 0, 1, 2, 2, 3, 0 };          private Color32 firstColor  = new (255, 0, 0, 0);         private Color32 secondColor  = new (0, 255, 0, 0);         private Color32 thirdColor  = new (0, 0, 255, 0);         private Color32 fourColor  = new (17, 55, 55, 0);          void GenerateVisualContent(MeshGenerationContext mgc)         {             vertices[0].tint = firstColor;             vertices[1].tint = secondColor;             vertices[2].tint = thirdColor;             vertices[3].tint = fourColor;              var top = 0;             var left = 0f;             var middleX = contentRect.width / 2;             var middleY = contentRect.height / 2;             var right = contentRect.width;             var bottom = contentRect.height;              vertices[0].position = new Vector3(left, middleY, Vertex.nearZ);             vertices[1].position = new Vector3(middleX, top, Vertex.nearZ);             vertices[2].position = new Vector3(right, middleY, Vertex.nearZ);             vertices[3].position = new Vector3(middleX, bottom, Vertex.nearZ);              MeshWriteData mwd = mgc.Allocate(vertices.Length, indices.Length);             mwd.SetAllVertices(vertices);             mwd.SetAllIndices(indices);         }     } } 

Обратим наше внимание на конструктор класса, мы там можем заметить вызов метода scheduler’а.

Мы хотим вызывать метод ChangeColorAnimation каждые 16 ms.

Дальше идет само тело метода анимации, в нем мы можем заметить _timeLeft, это переменная для отслеживания времени анимации, которое изначально равно AnimationTime.

Кстати, его можно настроить напрямую через UI Builder, благодаря новому атрибуту [UxmlAttribute].

Он появился в новой версии пакета, подробнее о нововведениях можно прочитать в моей статье.

Мы немного отвлеклись, вернемся к нашим анимациям.

private void ChangeColorAnimation() {     _timeLeft -= Time.deltaTime;          firstColor.a = (byte)Mathf.Lerp(firstColor.a, AlphaValue, Time.fixedDeltaTime / _timeLeft);     secondColor.a = (byte)Mathf.Lerp(secondColor.a, AlphaValue, Time.deltaTime / _timeLeft);     thirdColor.a = (byte)Mathf.Lerp(thirdColor.a, AlphaValue, Time.fixedDeltaTime / _timeLeft);     fourColor.a = (byte)Mathf.Lerp(fourColor.a, AlphaValue, Time.deltaTime / _timeLeft);      MarkDirtyRepaint(); } 

Дальше у нас идет четыре строки, где мы описываем, что оттенки наших вершин должны стремиться от 0 к 255.

После чего, мы вызываем метод MarkDirtyRepaint(), для того чтобы спровоцировать вызов метода GenerateVisualContent(…).

---

Глава 3: Новые повороты

Давайте признаемся, анимация цвета — это самое простое, что можно придумать.

А что, если у нас есть заявка на непосредственность? К примеру, мы хотим анимировать иконки/спрайты.

Иногда в голову прилетают интересные вещи, такие как мысли или более тяжелые, как анимация иконок без кадровой анимации.

В таком случае рассмотрим следующий пример, предположим, мы хотим чтобы у нас была анимация для колокола.

Концептуально, мы не делаем ничего сложного, сперва меняем точку вращения, а потом вращаем VisualElement*. (меняем значение rotate).

Зачем менять точку вращения у элемента? Чтобы логически было проще с этим работать и анимировать.

Для этого нам нужно изменить свойство transform-Origin, которое принимает два значения (X, Y), мы это сделаем прямо в конструкторе класса.

Обычно transform-Origin у элемента это center-center, то есть (X = 50%, Y = 50%), а мы хотим, чтобы он был top-center (X = 0%, Y = 50%).

Более подробно можно посмотреть в документации

Теперь, приступаем к основной части нашего мероприятия, написание самой анимации.

using UnityEngine.UIElements;  namespace CustomElements {     [UxmlElement]     public partial class ImageAnimation : VisualElement     {         [UxmlAttribute] private float AngleLimit = 25;         [UxmlAttribute] private bool AnimationIsStopped = true;                  private bool _rotationDirectionIsMinus = true;                  public ImageAnimation()         {             style.transformOrigin = new TransformOrigin( Length.Percent(50), 0);             schedule.Execute(PlayAnimation).Every(16);         }          private void PlayAnimation()         {             if (AnimationIsStopped)                 return;                          RotateBell();             MarkDirtyRepaint();         }          void RotateBell()         {             var newRotate = style.rotate;             Angle rotateAngle = newRotate.value.angle;              if (_rotationDirectionIsMinus)             {                 rotateAngle.value--;                 if (rotateAngle.value < -AngleLimit)                 {                     _rotationDirectionIsMinus = false;                 }             }             else if (_rotationDirectionIsMinus == false)             {                 rotateAngle.value++;                  if (rotateAngle.value > AngleLimit)                  {                      _rotationDirectionIsMinus = true;                  }             }                          newRotate.value = new Rotate(rotateAngle);             style.rotate = newRotate;         }     } } 

Так выглядит весь класс, наш взор падает на метод RotateBell().

Основной составляющей анимации в данном случае является изменение поворота изображения.

Мы вращаем изображение влево и вправо до тех пор, пока не достигнем предела AngleLimit.

Для этого мы изменяем значение свойства style.rotate и затем вызываем метод MarkDirtyRepaint(), чтобы нам перерисовали VisualElement.

Получаем такой результат.

---

Глава 4: Новые горизонты?

Сегодня мы разобрались, как можно анимировать элементы интерфейса в UI Toolkit’е и на этом закончим со статьями про кастомные элементы/анимации в Unity.

Если у вас есть вопросы или не поняли какую-то часть, приглашаю вас в комментарии 🙂

Спасибо за внимание и до скорых встреч!