Table of Contents

Анимации

Анимация меняет свойство во времени: панель плавно появляется, кнопка растёт при наведении, полоса здоровья плавно уменьшается. IcyUI анимирует любое зарегистрированное свойство элемента — из кода или из визуальных состояний стиля.

Из кода

Animate запускает Timeline на элементе и возвращает работающую Animation:

// Fades a panel in over 0.3 seconds.
public static Animation FadeIn(UIElement panel) =>
    panel.Animate(Timeline.FromTo(nameof(UIElement.Opacity), TimeSpan.FromSeconds(0.3), 0f, 1f, Easing.EaseOutCubic));

Timeline.FromTo(property, duration, from, to, easing, repeatCount, autoReverse) покрывает большинство случаев:

  • свойство называется строкой, например nameof(UIElement.Opacity);
  • числа, цвета, размеры и отступы интерполируются между двумя значениями;
  • repeatCount проигрывает анимацию несколько раз (Timeline.Forever — пока её не остановят), а autoReverse проигрывает каждый проход вперёд и назад, для пульсирующих эффектов.

Возвращённую анимацию можно приостановить, продолжить и остановить; по окончании она вызывает Completed.

Функции сглаживания

Сглаживание задаёт характер движения: Easing.Linear (постоянная скорость) и варианты EaseIn, EaseOut и EaseInOut для Quad и Cubic. Ease-out (быстрое начало, плавная остановка) подходит элементам, которые появляются на экране; ease-in — элементам, которые уходят с него.

Из визуальных состояний

Визуальное состояние с Duration анимирует переход к своим значениям вместо мгновенного переключения — обычный способ сделать наведение и нажатие плавными:

<VisualState Name="Hovered" State="Hovered" Background="#FF5A87E6" Duration="0:0:0.15" Easing="EaseOutCubic" />

См. Шаблоны и визуальные состояния.

Анимации и другие значения

Работающая анимация сильнее стилей и визуальных состояний, но не локального значения (см. Ресурсы, стили и темы). Закончившаяся анимация продолжает держать последнее значение; Stop() убирает её, и свойство возвращается к значению, которое было бы без анимации. Чтобы сохранить конечное значение насовсем, задайте его элементу и затем остановите анимацию.

Типичные ошибки

  • Локальное значение скрывает анимацию. Анимация Opacity у элемента, чей Opacity задан в разметке или в коде, ничего не меняет на экране; оставьте это свойство стилю или анимируйте другое.
  • Свойства компоновки анимируют компоновку. Анимация Width, Margin или Padding каждый кадр заново выполняет компоновку элемента и его соседей; для эффектов, которые не двигают другие элементы, предпочтительнее Opacity и преобразования отрисовки (RenderScale, RenderRotation).
  • Анимации идут в реальном времени, а не во времени игры. IcyUI обновляет их при отрисовке интерфейса, раз в кадр, на время, прошедшее с предыдущего кадра (одинаковый шаг для всех анимаций этого кадра). Пауза в игровой логике их не останавливает, поэтому меню паузы продолжает анимироваться. Они стоят только пока игра не рисует, а когда отрисовка возобновляется (например, после свёрнутого окна), сразу догоняют. Чтобы задержать анимацию, вызовите у неё Pause().

См. также