011. Avalonia UI - Animate In Code Behind
00:00 Проблемы с стилями всплывающего окна • Стили требуют явного задания ширины и высоты всплывающего окна, что неудобно для нескольких всплывающих окон с разными размерами. • Автоматическое вычисление ширины и высоты на основе содержимого невозможно. • Решение: удаление стилей и имитация переходного поведения. 00:43 Удаление стилей и подготовка к анимации • Удаление стилей для упрощения кода. • Привязка к состоянию списка настроек канала будет изменена и добавлена в новый элемент управления. • Управление размером всплывающего окна будет зависеть от содержимого. 01:33 Создание нового элемента управления • Создание панели стека с меткой и рамкой. • Настройка отступов, фона и границы. • Удаление стилей с метки для изменения размера элемента управления. 03:02 Реализация анимации в коде • Создание нового конструктора для анимации. • Запуск анимации при создании элемента управления. • Привязка анимации к свойству «открыто». 04:37 Определение желаемого размера • Создание закрытого элемента size для хранения желаемого размера элемента управления. • Переопределение рендеринга для получения желаемого размера. • Проверка желаемого размера через отладку. 06:26 Управление анимацией • Добавление логического значения для управления анимацией. • Обновление размера элемента управления в зависимости от состояния анимации. • Вывод размера в консоль для отладки. 08:07 Настройка таймера для анимации • Установка таймера с частотой 60 кадров в секунду. • Использование таймера диспетчера для работы в потоке пользовательского интерфейса. • Запуск таймера и проверка его работы. 12:27 Анимация размера элемента управления • Ограничение продолжительности работы таймера. • Анимация размера элемента управления от нуля до текущего желаемого размера. • Возможность указания продолжительности анимации пользователем. 12:57 Инициализация объекта и планирование анимации • Инициализация объекта проста. • Планируется анимация длительностью три секунды. • Общее время анимации равно промежутку времени, начинающемуся с третьей секунды. 13:42 Вычисление количества тактов • Необходимо вычислить, сколько тактов должно пройти до истечения трёх секунд. • Частота кадров делится на общее время анимации для получения количества тактов. • Значение округляется до целого числа. 15:05 Управление текущим значением такта • Сохраняется текущее значение такта, которое сбрасывается при каждом перезапуске анимации. • Текущее значение такта увеличивается в таймере. • При достижении общего количества тактов анимация останавливается. 16:12 Запуск анимации и проверка • Запускается анимация с 180 отметками. • Проверяется, что анимация занимает три секунды. • Возникает необходимость остановки выполнения кода после 180-й отметки. 17:11 Реализация анимации ширины и высоты • Изменяется ширина и высота элемента управления в каждом такте. • Демонстрируется случайная анимация ширины. • Аналогичная анимация высоты показывает несоответствие желаемому результату. 18:03 Линейная анимация в процентах • Рассчитывается процент от пройденного пути: общее количество тактов делится на текущие такты. • Желаемая ширина и высота умножаются на процент для линейной анимации. • Исправляется проблема с изменением желаемого размера. 20:33 Преобразование чисел с плавающей точкой • Текущие и общие такты преобразуются в числа с плавающей точкой для корректных вычислений. • Анимация начинается и заканчивается корректно. 21:44 Квадратичная анимация • Используется квадратичная анимация для создания эффекта лёгкости. • Процент анимации изменяется для создания квадратичной кривой. • Эффект анимации становится медленнее. 24:15 Проблемы с размером и их решение • Проверяется, не равен ли желаемый размер null. • Анимация запускается только после обновления размера. • Исследуется влияние маржи на конечный размер. 28:21 Двойная анимация и её устранение • Обнаруживается двойная анимация из-за решения анимировать внутри и снаружи. • Анимация выполняется в зависимости от времени. • Проблема решается путём игнорирования второго прохода анимации. 28:41 Запуск анимации • Анимация запускается путём установки текущей галочки. • Галочка переносится в частную собственность. 29:04 Управление анимацией • В конструкторе устанавливается значение «ноль». • Каждый тик анимируется, при достижении определённого значения анимация останавливается. • При быстром нажатии на кнопку анимация перезапускается с нуля, возможно небольшое заикание. 29:51 Настройка размера • Проверяется необходимость чека размера. • Убирается маржа, которая является толщиной. • Проверяется возможность уменьшения размера за вычетом толщины. 30:42 Тестирование размера • Первый размер равен 124 с разницей в 25. • После второго прохода размер становится таким же, и анимация правильно масштабируется. • Анимация запускается с размером, соответствующим размеру исходного элемента управления. 31:35 Проблемы с пользовательским интерфейсом 32:02 Планы на будущее
00:00 Проблемы с стилями всплывающего окна • Стили требуют явного задания ширины и высоты всплывающего окна, что неудобно для нескольких всплывающих окон с разными размерами. • Автоматическое вычисление ширины и высоты на основе содержимого невозможно. • Решение: удаление стилей и имитация переходного поведения. 00:43 Удаление стилей и подготовка к анимации • Удаление стилей для упрощения кода. • Привязка к состоянию списка настроек канала будет изменена и добавлена в новый элемент управления. • Управление размером всплывающего окна будет зависеть от содержимого. 01:33 Создание нового элемента управления • Создание панели стека с меткой и рамкой. • Настройка отступов, фона и границы. • Удаление стилей с метки для изменения размера элемента управления. 03:02 Реализация анимации в коде • Создание нового конструктора для анимации. • Запуск анимации при создании элемента управления. • Привязка анимации к свойству «открыто». 04:37 Определение желаемого размера • Создание закрытого элемента size для хранения желаемого размера элемента управления. • Переопределение рендеринга для получения желаемого размера. • Проверка желаемого размера через отладку. 06:26 Управление анимацией • Добавление логического значения для управления анимацией. • Обновление размера элемента управления в зависимости от состояния анимации. • Вывод размера в консоль для отладки. 08:07 Настройка таймера для анимации • Установка таймера с частотой 60 кадров в секунду. • Использование таймера диспетчера для работы в потоке пользовательского интерфейса. • Запуск таймера и проверка его работы. 12:27 Анимация размера элемента управления • Ограничение продолжительности работы таймера. • Анимация размера элемента управления от нуля до текущего желаемого размера. • Возможность указания продолжительности анимации пользователем. 12:57 Инициализация объекта и планирование анимации • Инициализация объекта проста. • Планируется анимация длительностью три секунды. • Общее время анимации равно промежутку времени, начинающемуся с третьей секунды. 13:42 Вычисление количества тактов • Необходимо вычислить, сколько тактов должно пройти до истечения трёх секунд. • Частота кадров делится на общее время анимации для получения количества тактов. • Значение округляется до целого числа. 15:05 Управление текущим значением такта • Сохраняется текущее значение такта, которое сбрасывается при каждом перезапуске анимации. • Текущее значение такта увеличивается в таймере. • При достижении общего количества тактов анимация останавливается. 16:12 Запуск анимации и проверка • Запускается анимация с 180 отметками. • Проверяется, что анимация занимает три секунды. • Возникает необходимость остановки выполнения кода после 180-й отметки. 17:11 Реализация анимации ширины и высоты • Изменяется ширина и высота элемента управления в каждом такте. • Демонстрируется случайная анимация ширины. • Аналогичная анимация высоты показывает несоответствие желаемому результату. 18:03 Линейная анимация в процентах • Рассчитывается процент от пройденного пути: общее количество тактов делится на текущие такты. • Желаемая ширина и высота умножаются на процент для линейной анимации. • Исправляется проблема с изменением желаемого размера. 20:33 Преобразование чисел с плавающей точкой • Текущие и общие такты преобразуются в числа с плавающей точкой для корректных вычислений. • Анимация начинается и заканчивается корректно. 21:44 Квадратичная анимация • Используется квадратичная анимация для создания эффекта лёгкости. • Процент анимации изменяется для создания квадратичной кривой. • Эффект анимации становится медленнее. 24:15 Проблемы с размером и их решение • Проверяется, не равен ли желаемый размер null. • Анимация запускается только после обновления размера. • Исследуется влияние маржи на конечный размер. 28:21 Двойная анимация и её устранение • Обнаруживается двойная анимация из-за решения анимировать внутри и снаружи. • Анимация выполняется в зависимости от времени. • Проблема решается путём игнорирования второго прохода анимации. 28:41 Запуск анимации • Анимация запускается путём установки текущей галочки. • Галочка переносится в частную собственность. 29:04 Управление анимацией • В конструкторе устанавливается значение «ноль». • Каждый тик анимируется, при достижении определённого значения анимация останавливается. • При быстром нажатии на кнопку анимация перезапускается с нуля, возможно небольшое заикание. 29:51 Настройка размера • Проверяется необходимость чека размера. • Убирается маржа, которая является толщиной. • Проверяется возможность уменьшения размера за вычетом толщины. 30:42 Тестирование размера • Первый размер равен 124 с разницей в 25. • После второго прохода размер становится таким же, и анимация правильно масштабируется. • Анимация запускается с размером, соответствующим размеру исходного элемента управления. 31:35 Проблемы с пользовательским интерфейсом 32:02 Планы на будущее