009. Avalonia UI - Animated Popups Custom Overlays
00:00 Введение в задачу • Создание всплывающего окна с кнопками, похожего на индикатор громкости Alian. • Отказ от использования выпадающего списка для сохранения оригинальности. • Особенности всплывающего окна: анимация выдвижения, настраиваемые выпадающие списки, расширяемые заголовки. 00:44 Проблемы и решения • Сложности при изменении размера окна и возможные сбои. • Необходимость избегания добавления багов в версию. • Решение сделать фон белым для наглядности. 01:57 Настройка кнопки и сетки • Преобразование кнопки в элемент управления с стрелкой. • Добавление нового элемента управления поверх основной сетки при нажатии на кнопку. • Специфика работы отрисовки в Avalon. 02:47 Изоляция модели представления • Размещение кода позиционирования вне модели представления. • Использование интерфейсов и обратных вызовов для взаимодействия между моделью и представлением. • Назначение имён элементам для удобства работы с кодом. 04:02 Создание команды для кнопки • Добавление булевого значения для управления открытием списка конфигураций каналов. • Создание команды «нажатие кнопки выбора конфигурации каналов». • Привязка команды к кнопке для переключения её состояния. 05:38 Проверка работы команды • Визуальная проверка работы команды через кнопку «YouTube». • Переключение видимости списка при нажатии на кнопку. 06:04 Настройка всплывающего окна • Добавление рамки для обозначения места всплывающего окна. • Установка индекса Z для отображения окна поверх остального контента. • Настройка непрозрачности и выравнивание границы. 08:00 Определение положения кнопки • Определение положения кнопки при каждой отрисовке окна. • Установка полей для кнопки относительно основной сетки. • Получение координат кнопки для настройки всплывающего меню. 10:40 Обработка сбоев и настройка всплывающего окна • Проверка наличия кнопки по имени и обработка ошибок. • Настройка всплывающего окна для конфигурации канала. • Обновление кода для обработки сбоев при открытии представления. 12:03 Настройка полей всплывающего окна • Установка полей для всплывающих окон при вызове рендеринга. • Задание толщины всплывающего окна на основе значений полей. • Перерисовка представления при изменении размера для обновления полей. 12:42 Рендеринг и положение кнопки • Рендеринг запускается только при изменении размера окна. • Необходимо определить положение кнопки относительно основной сетки. • Для этого нужно узнать высоту основной сетки и получить ограничивающий прямоугольник кнопки. 13:30 Преобразование положения кнопки • Координаты кнопки указаны относительно её контейнера. • Используется функция `translatePoint` для преобразования положения кнопки относительно основной сетки. • Передаётся основная сетка для получения позиции кнопки. 15:16 Проверка позиции и настройка отступов • Проверяется, является ли позиция нулевой, и выдаётся исключение при ошибке. • Устанавливаются значения `left` и `bottom` для кнопки. • Исправляется ошибка, связанная с отсутствием основной сетки. 17:01 Корректировка положения кнопки • Кнопка выравнивается по верхнему краю, но добавляется отступ снизу. • Вычитается высота кнопки из высоты ограничивающей области основной сетки. • Кнопка сдвигается ниже для корректного отображения. 18:19 Привязка кнопки к другому элементу управления • Кнопка привязывается к нижнему левому углу другого элемента управления. • Проверяется работа привязки при перемещении элементов. • Обновляется предварительный просмотр без запуска приложения. 21:15 Создание вспомогательного класса • Создаётся вспомогательный класс для управления всплывающим окном. • Устанавливаются поля всплывающего окна и его позиция. • Планируется анимация размера всплывающего окна при нажатии на кнопку. 22:34 Анимация всплывающего окна • Добавляется новый стиль для анимации ширины и высоты всплывающего окна. • Задаются переходы для свойств `width` и `height`. • Проверяется работа анимации при добавлении класса `open`. 25:06 Завершение анимации • Создаётся второй стиль для класса `open`. • Задаются конкретные значения ширины и высоты для анимации. • Проверяется финальная анимация всплывающего окна. 25:55 Анимация всплывающего окна • Обсуждение использования кривой анимации вместо линейной. • Поиск подходящей анимации в Avalon, упоминание «баунс и сын». • Проблемы с текущей анимацией: окно «подпрыгивает». 27:15 Выбор подходящей анимации • Попытка использовать «м-эластик и сын и аут», но результат не устраивает. • Решение использовать синусоидальную кривую для более плавного нарастания скорости. • Успешное применение квадратичной кривой для постепенного нарастания скорости. 28:40 Управление меню • Добавление элемента для управления меню после его открытия. • Настройка индекса и цвета для отображения меню поверх других элементов. • Использование прозрачного оверлея для перехвата событий нажатия. 30:07 Обработка событий нажатия. 32:19 Создание всплывающего окна с настройками 33:46 Заключение
00:00 Введение в задачу • Создание всплывающего окна с кнопками, похожего на индикатор громкости Alian. • Отказ от использования выпадающего списка для сохранения оригинальности. • Особенности всплывающего окна: анимация выдвижения, настраиваемые выпадающие списки, расширяемые заголовки. 00:44 Проблемы и решения • Сложности при изменении размера окна и возможные сбои. • Необходимость избегания добавления багов в версию. • Решение сделать фон белым для наглядности. 01:57 Настройка кнопки и сетки • Преобразование кнопки в элемент управления с стрелкой. • Добавление нового элемента управления поверх основной сетки при нажатии на кнопку. • Специфика работы отрисовки в Avalon. 02:47 Изоляция модели представления • Размещение кода позиционирования вне модели представления. • Использование интерфейсов и обратных вызовов для взаимодействия между моделью и представлением. • Назначение имён элементам для удобства работы с кодом. 04:02 Создание команды для кнопки • Добавление булевого значения для управления открытием списка конфигураций каналов. • Создание команды «нажатие кнопки выбора конфигурации каналов». • Привязка команды к кнопке для переключения её состояния. 05:38 Проверка работы команды • Визуальная проверка работы команды через кнопку «YouTube». • Переключение видимости списка при нажатии на кнопку. 06:04 Настройка всплывающего окна • Добавление рамки для обозначения места всплывающего окна. • Установка индекса Z для отображения окна поверх остального контента. • Настройка непрозрачности и выравнивание границы. 08:00 Определение положения кнопки • Определение положения кнопки при каждой отрисовке окна. • Установка полей для кнопки относительно основной сетки. • Получение координат кнопки для настройки всплывающего меню. 10:40 Обработка сбоев и настройка всплывающего окна • Проверка наличия кнопки по имени и обработка ошибок. • Настройка всплывающего окна для конфигурации канала. • Обновление кода для обработки сбоев при открытии представления. 12:03 Настройка полей всплывающего окна • Установка полей для всплывающих окон при вызове рендеринга. • Задание толщины всплывающего окна на основе значений полей. • Перерисовка представления при изменении размера для обновления полей. 12:42 Рендеринг и положение кнопки • Рендеринг запускается только при изменении размера окна. • Необходимо определить положение кнопки относительно основной сетки. • Для этого нужно узнать высоту основной сетки и получить ограничивающий прямоугольник кнопки. 13:30 Преобразование положения кнопки • Координаты кнопки указаны относительно её контейнера. • Используется функция `translatePoint` для преобразования положения кнопки относительно основной сетки. • Передаётся основная сетка для получения позиции кнопки. 15:16 Проверка позиции и настройка отступов • Проверяется, является ли позиция нулевой, и выдаётся исключение при ошибке. • Устанавливаются значения `left` и `bottom` для кнопки. • Исправляется ошибка, связанная с отсутствием основной сетки. 17:01 Корректировка положения кнопки • Кнопка выравнивается по верхнему краю, но добавляется отступ снизу. • Вычитается высота кнопки из высоты ограничивающей области основной сетки. • Кнопка сдвигается ниже для корректного отображения. 18:19 Привязка кнопки к другому элементу управления • Кнопка привязывается к нижнему левому углу другого элемента управления. • Проверяется работа привязки при перемещении элементов. • Обновляется предварительный просмотр без запуска приложения. 21:15 Создание вспомогательного класса • Создаётся вспомогательный класс для управления всплывающим окном. • Устанавливаются поля всплывающего окна и его позиция. • Планируется анимация размера всплывающего окна при нажатии на кнопку. 22:34 Анимация всплывающего окна • Добавляется новый стиль для анимации ширины и высоты всплывающего окна. • Задаются переходы для свойств `width` и `height`. • Проверяется работа анимации при добавлении класса `open`. 25:06 Завершение анимации • Создаётся второй стиль для класса `open`. • Задаются конкретные значения ширины и высоты для анимации. • Проверяется финальная анимация всплывающего окна. 25:55 Анимация всплывающего окна • Обсуждение использования кривой анимации вместо линейной. • Поиск подходящей анимации в Avalon, упоминание «баунс и сын». • Проблемы с текущей анимацией: окно «подпрыгивает». 27:15 Выбор подходящей анимации • Попытка использовать «м-эластик и сын и аут», но результат не устраивает. • Решение использовать синусоидальную кривую для более плавного нарастания скорости. • Успешное применение квадратичной кривой для постепенного нарастания скорости. 28:40 Управление меню • Добавление элемента для управления меню после его открытия. • Настройка индекса и цвета для отображения меню поверх других элементов. • Использование прозрачного оверлея для перехвата событий нажатия. 30:07 Обработка событий нажатия. 32:19 Создание всплывающего окна с настройками 33:46 Заключение