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 Настройка диапазона • Настраиваются минимальные и максимальные значения для масштабируемой стрелки. • Стрелка визуально масштабируется в точном диапазоне. • Планируется добавление реакции стрелки на реальный звук для более реалистичного отображения уровня громкости.
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 Настройка диапазона • Настраиваются минимальные и максимальные значения для масштабируемой стрелки. • Стрелка визуально масштабируется в точном диапазоне. • Планируется добавление реакции стрелки на реальный звук для более реалистичного отображения уровня громкости.