#12 C# WPF UI - Привязка модели представления MVVM к анимациям
00:07 Введение и цели • Перенос кода в базовый проект и добавление внедрения зависимостей IOC. • Создание загружаемого приложения с боковым меню и доступом к моделям представления. • Подготовка к финальному релизу: удаление бокового меню на странице входа. 01:06 Анимация бокового меню • Добавление анимации для выдвижения и задвигания бокового меню. • Привязка бокового меню к моделям представления. • Использование логического значения для отображения меню. 02:58 Присоединённое свойство и анимация • Создание присоединённого свойства для анимации. • Настройка значения по умолчанию false. • Переопределение обратного вызова для анимации. 03:55 Принудительное значение • Использование принудительного значения для постоянного обновления свойства. • Создание события on value updated для анимации. 07:39 Создание класса для анимации • Создание класса для анимации элементов фреймворка. • Реализация базового класса для анимации на основе логического значения. • Настройка анимации: сдвиг влево при значении false, сдвиг вправо при значении true. 10:36 Проверка элемента фреймворка и изменение значения • Проверка, является ли отправитель элементом фреймворка. • Получение текущего значения свойства value отправителя. • Исключение повторной анимации при совпадении значений. 11:36 Первая загрузка и обновление значения • Запуск функции анимации только при первой загрузке. • Обновление значения при каждом запуске для корректной работы анимации. 12:36 Проверка изменения значения и первая загрузка • Создаём логическое значение first load для отслеживания первой загрузки свойства анимации. • По умолчанию first load равно true. • Анимация не запускается, если значение не изменилось или это первый запуск. 13:34 Проблемы при первом запуске • При первом запуске свойства оцениваются до загрузки элемента, что приводит к нулевой ширине элемента. • Для анимации выхода элемента за пределы экрана нужно знать его текущую ширину. • Решаем проблему, ожидая загрузки элемента перед выполнением действий. 14:31 Создание однократного события • Подключаемся к событию загрузки элемента и автоматически отключаемся. • Создаём однократное событие, которое срабатывает только один раз. • Используем корневой обработчик событий для автоматического отключения. 15:26 Реализация однократного события • Присваиваем переменной unloaded значение null перед подключением к событию. • Отключаемся от события после его срабатывания. • Этот метод позволяет избежать проблем с самоотцеплением. 17:25 Выполнение анимации • Создаём абстрактный класс для анимации, переопределяя метод doAnimation. • Анимация запускается при изменении значения элемента. • После первой загрузки first load устанавливается в false, и анимация запускается только при изменении значения. 20:36 Создание анимации скольжения • Создаём класс animate slide in left для анимации скольжения элемента влево при отображении и вправо при скрытии. • Переопределяем doAnimation для указания действий при анимации. • Преобразуем анимацию страницы в анимацию элемента фреймворка. 24:02 Настройка анимации • Настраиваем анимацию так, чтобы элемент скользил и появлялся слева. • Инвертируем значения в помощниках раскадровки для анимации движения слева. • Начинаем анимацию с отрицательного значения слева и анимируем до нуля, двигаясь внутрь. 25:34 Добавление слайдов • Добавление слайда справа для сдвига элемента наружу. • Обсуждение анимации справа и расстояния, с которого начинается движение. 26:14 Анимация слайда • Добавление анимации слайда слева и справа. • Объяснение, что анимация слайда справа означает движение внутрь. 27:39 Сдвиг вправо и влево • Начало сдвига с нуля и движение вправо. • Инверсия сдвига влево. 28:07 Плавное появление меню • Сдвиг меню слева и добавление плавного появления. • Использование метода расширения для элементов. 29:24 Асинхронная анимация • Настройка анимации появления и исчезновения меню. • Установка времени анимации по умолчанию. 32:16 Проблемы с анимацией • Обнаружение проблем: заострённый нижний угол, сетка не сместилась, выдвижение меню при первой загрузке. 33:05 Исправление анимации при первой загрузке • Уменьшение времени анимации до 0 секунд при первой загрузке. • Проверка работы анимации. 34:25 Исправление отступов • Анализ проблемы с отступами и анимацией. • Добавление свойства для сохранения ширины во время анимации. 39:28 Завершение настройки анимации • Настройка сохранения поля для анимации выхода. • Проверка загрузки страницы с анимацией. 40:47 Тестирование анимации • Изменение модели представления для входа в систему. • Тестирование анимации бокового меню при нажатии на ссылку. 41:43 Настройка бокового меню 42:36 Проблемы с анимацией 43:22 Исправление отступов 44:31 Обрезка контента 45:45 Завершение настройки меню 46:50 Настройка страницы входа 48:25 Фиктивный код для входа 49:23 Применение анимации к элементам 51:12 Заключение
00:07 Введение и цели • Перенос кода в базовый проект и добавление внедрения зависимостей IOC. • Создание загружаемого приложения с боковым меню и доступом к моделям представления. • Подготовка к финальному релизу: удаление бокового меню на странице входа. 01:06 Анимация бокового меню • Добавление анимации для выдвижения и задвигания бокового меню. • Привязка бокового меню к моделям представления. • Использование логического значения для отображения меню. 02:58 Присоединённое свойство и анимация • Создание присоединённого свойства для анимации. • Настройка значения по умолчанию false. • Переопределение обратного вызова для анимации. 03:55 Принудительное значение • Использование принудительного значения для постоянного обновления свойства. • Создание события on value updated для анимации. 07:39 Создание класса для анимации • Создание класса для анимации элементов фреймворка. • Реализация базового класса для анимации на основе логического значения. • Настройка анимации: сдвиг влево при значении false, сдвиг вправо при значении true. 10:36 Проверка элемента фреймворка и изменение значения • Проверка, является ли отправитель элементом фреймворка. • Получение текущего значения свойства value отправителя. • Исключение повторной анимации при совпадении значений. 11:36 Первая загрузка и обновление значения • Запуск функции анимации только при первой загрузке. • Обновление значения при каждом запуске для корректной работы анимации. 12:36 Проверка изменения значения и первая загрузка • Создаём логическое значение first load для отслеживания первой загрузки свойства анимации. • По умолчанию first load равно true. • Анимация не запускается, если значение не изменилось или это первый запуск. 13:34 Проблемы при первом запуске • При первом запуске свойства оцениваются до загрузки элемента, что приводит к нулевой ширине элемента. • Для анимации выхода элемента за пределы экрана нужно знать его текущую ширину. • Решаем проблему, ожидая загрузки элемента перед выполнением действий. 14:31 Создание однократного события • Подключаемся к событию загрузки элемента и автоматически отключаемся. • Создаём однократное событие, которое срабатывает только один раз. • Используем корневой обработчик событий для автоматического отключения. 15:26 Реализация однократного события • Присваиваем переменной unloaded значение null перед подключением к событию. • Отключаемся от события после его срабатывания. • Этот метод позволяет избежать проблем с самоотцеплением. 17:25 Выполнение анимации • Создаём абстрактный класс для анимации, переопределяя метод doAnimation. • Анимация запускается при изменении значения элемента. • После первой загрузки first load устанавливается в false, и анимация запускается только при изменении значения. 20:36 Создание анимации скольжения • Создаём класс animate slide in left для анимации скольжения элемента влево при отображении и вправо при скрытии. • Переопределяем doAnimation для указания действий при анимации. • Преобразуем анимацию страницы в анимацию элемента фреймворка. 24:02 Настройка анимации • Настраиваем анимацию так, чтобы элемент скользил и появлялся слева. • Инвертируем значения в помощниках раскадровки для анимации движения слева. • Начинаем анимацию с отрицательного значения слева и анимируем до нуля, двигаясь внутрь. 25:34 Добавление слайдов • Добавление слайда справа для сдвига элемента наружу. • Обсуждение анимации справа и расстояния, с которого начинается движение. 26:14 Анимация слайда • Добавление анимации слайда слева и справа. • Объяснение, что анимация слайда справа означает движение внутрь. 27:39 Сдвиг вправо и влево • Начало сдвига с нуля и движение вправо. • Инверсия сдвига влево. 28:07 Плавное появление меню • Сдвиг меню слева и добавление плавного появления. • Использование метода расширения для элементов. 29:24 Асинхронная анимация • Настройка анимации появления и исчезновения меню. • Установка времени анимации по умолчанию. 32:16 Проблемы с анимацией • Обнаружение проблем: заострённый нижний угол, сетка не сместилась, выдвижение меню при первой загрузке. 33:05 Исправление анимации при первой загрузке • Уменьшение времени анимации до 0 секунд при первой загрузке. • Проверка работы анимации. 34:25 Исправление отступов • Анализ проблемы с отступами и анимацией. • Добавление свойства для сохранения ширины во время анимации. 39:28 Завершение настройки анимации • Настройка сохранения поля для анимации выхода. • Проверка загрузки страницы с анимацией. 40:47 Тестирование анимации • Изменение модели представления для входа в систему. • Тестирование анимации бокового меню при нажатии на ссылку. 41:43 Настройка бокового меню 42:36 Проблемы с анимацией 43:22 Исправление отступов 44:31 Обрезка контента 45:45 Завершение настройки меню 46:50 Настройка страницы входа 48:25 Фиктивный код для входа 49:23 Применение анимации к элементам 51:12 Заключение