013. Avalonia UI - Open Close Animation

00:00 Поддержка закрытия всплывающего окна Необходимо поддержать закрытие всплывающего окна которое сейчас можно только открыть. Для этого создаём новый элемент управления underlay внутри анимированного всплывающего окна. 00:37 Создание элемента управления underlay В конструкторе создаём новый элемент управления underlay. Устанавливаем его границу и делаем фон прозрачным сначала делая его красным для видимости. 01:27 Настройка индекса z и события нажатия мыши Изменяем индекс z на 9 для прозрачности. Добавляем событие нажатия указателя мыши для закрытия всплывающего окна. 02:32 Имитация поведения закрытия Устанавливаем диапазон строк и столбцов для имитации поведения закрытия. Определяем момент внедрения элемента управления underlay при полном открытии контроллера. 03:44 Перенос кода в новый метод Переносим код в новый метод для завершения анимации открытия и закрытия. Проверяем работу метода через точки останова. 06:10 Вставка и удаление подложки Вставляем подложку при полном открытии контроллера если родительским элементом является сетка. Удаляем подложку при закрытии проверяя наличие в сетке. 08:18 Настройка свойств сетки Устанавливаем прикреплённые свойства для сетки диапазона строк и столбцов. Проверяем наличие определений строк и столбцов в сетке. 11:18 Анимация непрозрачности Настраиваем анимацию непрозрачности подложки для естественного исчезновения. Уменьшаем непрозрачность в начале анимации открытия. 14:24 Завершение настройки Переносим настройки непрозрачности в команду Открыть. Проверяем работу анимации в конструкторе. 15:07 Настройка переходов Настраиваем двойной переход для непрозрачности. Проверяем работу переходов в фоновом режиме. 16:13 Анимация непрозрачности Непрозрачность не устанавливается напрямую а анимируется вместе с элементом управления. Используется таймер анимации и бегущая строка. Подложка анимируется для открывания и закрывания элемента управления. 17:04 Создание анимации подложки Подложка создаётся с равными значениями. Процент анимации рассчитывается на основе размера. Полученный процент умножается на 0.2 для желаемого объёма перехода. 17:29 Эффект анимации Один цикл анимации создаёт плавный переход фона. Возможность увеличения непрозрачности фона до определённого свойства. 17:48 Свойства анимации Используются свойства open и время анимации. Непрозрачность подложки задаётся двойным значением. По умолчанию непрозрачность равна 0.2. 18:46 Обновление кода Обновление кода для добавления подложки или пастообразного слоя. Возможность полного покрытия или установки определённого значения непрозрачности. 20:03 Поддержка промежуточных переходов Поддержка промежуточных переходов при открытии и закрытии окна. Возможность закрытия окна на полпути открытия. 20:11 Следующий шаг Добавление контента внутри элемента управления. Создание расширяемого и сворачиваемого элемента управления. Настройка переменной ширины и высоты всплывающих окон.

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