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