018. Avalonia UI - Animating Over Time To 100 Height

00:00 Начало работы со стрелкой Обсуждение рисования стрелки-индикатора. Планирование анимации движения стрелки вверх и вниз. Подготовка к работе с реальным звуком. 00:50 Создание контура стрелки Замена прямоугольника контуром для рисования стрелки. Заполнение контура белым цветом и добавление данных. Начало рисования стрелки с точек x и y. 02:07 Настройка размера стрелки Увеличение ширины стрелки до 20 раз. Сравнение с оригинальной стрелкой измерителя громкости Yulin. Корректировка размеров стрелки. 04:12 Привязка стрелки к объекту недвижимости Установка позиции стрелки на холсте. Создание наблюдаемого свойства положение в процентах объёма. Привязка стрелки к объекту недвижимости. 05:41 Анимация стрелки Разработка функции инициализации и таймера. Установка интервала таймера на 60 секунд. Тестирование анимации движения стрелки. 08:16 Реализация синусоидальной волны Замедление таймера на 5 секунд для более плавной анимации. Вычисление синусоидальной волны на основе тика таймера. Умножение синусоидальной волны на масштаб 100. 10:30 Настройка частоты кадров Разделение тика на число с плавающей запятой для сохранения точности. Тестирование анимации на 120 кадрах в секунду. Возвращение к 60 кадрам в секунду и дальнейшее замедление процесса. 11:28 Определение масштаба Вместо случайного масштабирования предлагается определить масштаб на основе высоты холста. Используется код анимированных всплывающих окон для определения размера объектов. При рендеринге запускается таймер для обновления свойства размера. 12:28 Использование таймера Таймер определения размера используется для получения желаемого размера за вычетом границ сетки. Таймер тайм-аута определяет завершение автоматического определения размера при масштабировании. Обновление размера происходит когда изображение перестаёт двигаться на 100 миллисекунд. 13:45 Создание универсального метода В конструкторе главного представления создаётся новый таймер. Метод обновления размеров становится универсальным и может использоваться в разных местах. 15:09 Настройка размера контейнера Устанавливается процент громкости и размер контейнера для объёма. Размер контейнера устанавливается на 500 но требуется настройка на фактический размер холста. 18:27 Проблемы с размером Желаемый размер контейнера для объёма не работает должным образом. Границы контейнера имеют значение но расчёты размера не учитываются. 19:36 Коррекция размера Размер контейнера сокращается вдвое для учёта синусоидальной волны. Возможность указания размера от 0 до 100 достигается через преобразователь значений. 20:31 Настройка диапазона Настраиваются минимальные и максимальные значения для масштабируемой стрелки. Стрелка визуально масштабируется в точном диапазоне. Планируется добавление реакции стрелки на реальный звук для более реалистичного отображения уровня громкости.

Источник: rutube.ru