02. Avalonia UI Real World (Fonts and Animations)
00:00 Запуск приложения Avalonia • Запуск нового приложения Avalonia с боковым меню и кнопками. • Цель: улучшить визуальный ряд, добавив значки и улучшив эффекты затухания. 00:23 Работа с кнопками • Добавление элементов внутри кнопки: использование панели стека для размещения ярлыков. • Изменение ориентации кнопки на горизонтальную. • Вставка изображений и значков слева от кнопок. 01:45 Использование шрифтов для значков • Загрузка шрифтов с GitHub или другого источника. • Создание папки «шрифты» в разделе «Ресурсы». • Вставка фосфорных шрифтов и шрифта Aco Pro. 02:52 Настройка шрифтов в Avalonia • Изменение действия «Создать» на «ресурсы Avalonia». • Создание семейства шрифтов и настройка путей к шрифтам. • Указание фактического названия шрифта в Windows и его физического имени. 05:16 Применение шрифтов • Назначение шрифта окну верхнего уровня для каскадного распространения. • Использование селектора window и свойства семейства шрифтов. • Исправление смещения шрифта с помощью отступов. 08:24 Работа с фосфорными шрифтами • Импорт фосфорных шрифтов в приложение XAML. • Создание класса иконок и ввод значений в юникоде. • Пример ввода юникода для символа «дом». 10:10 Ввод юникодов • Объяснение способа ввода юникодов с использованием хэш-тегов. • Пример ввода юникода для символа «uplius». 10:42 Работа со стилями и шрифтами • Важно ставить точку с запятой в конце кода, чтобы избежать ошибок компиляции. • Исправление проблем с выравниванием шрифтов с помощью значков и класса. • Создание стиля для кнопок и надписей, настройка отступов. 11:40 Настройка семейства шрифтов • Применение точечных значков к различным элементам интерфейса. • Настройка свойства семейства шрифтов и люминофорной заливки. • Использование точечного контроля для более гибкой настройки шрифтов. 12:27 Работа с отступами и полями • Настройка отступов для элементов интерфейса. • Копирование и вставка кода для создания пользовательского элемента управления. • Обновление юникодов для соответствия значкам. 13:36 Настройка значка «Настройки» • Создание сетки и строки для значка «Настройки». • Решение проблемы с центрированием значка при использовании полей вместо отступов. • Эксперименты с различными стилями для кнопки «Настройки». 14:27 Исправление ошибок со шрифтом • Временное удаление отступов для демонстрации ошибки в высоте шрифта. • Применение класса «echo» для исправления ошибок со шрифтом. • Настройка стилей для кнопок с разными комбинациями текста и значков. 16:58 Прозрачные кнопки • Добавление прозрачного стиля для кнопок. • Настройка свойства background для прозрачных кнопок. • Проверка работы прозрачных кнопок в реальном приложении. 19:15 Анимация кнопок • Настройка анимации масштабирования текста при наведении курсора. • Определение значения по умолчанию для масштаба рендеринга. • Игнорирование радиуса поворота при масштабировании надписей. 22:18 Завершение настройки анимации • Настройка переходов для анимации кнопок. • Оживление кнопок путём изменения цвета и масштаба. • Финальная проверка работы анимации. 22:44 Настройка переходов • Создаём новый массив переходов для масштабирования. • Устанавливаем длительность перехода в 0,1 секунды. • Проверяем анимацию масштабирования. 23:31 Анимация цвета фона • Копируем переходы для цвета фона. • Масштабируем весь контент, а не только ярлык. • Применяем внутренние переходы для цвета фона. 24:41 Проверка анимации • Проверяем продолжительность анимации. • Анимируем изменение переднего плана от белого до светло-белого. • Убеждаемся, что анимация работает. 25:02 Настройка свойств • Настраиваем свойство render transform по умолчанию. • Включаем анимацию переходов. • Проверяем работу анимации. 26:04 Визуализация приложения • Сравниваем макет и реальное приложение. • Отмечаем приятный эффект при наведении курсора. • Настраиваем отступы и шрифт по вкусу. 26:26 Настройка шрифтов • Выбираем семейство шрифтов для прозрачности. • Устанавливаем семейство шрифтов «динамический ресурс» или «люминофор». • Исправляем ошибку с значком на этикетке. 27:32 Завершение работы • Добавляем пользовательские шрифты и исправляем ошибки. • Добавляем анимацию на кнопки. • Планируем следующую работу: создание моделей просмотра и навигация по страницам.
00:00 Запуск приложения Avalonia • Запуск нового приложения Avalonia с боковым меню и кнопками. • Цель: улучшить визуальный ряд, добавив значки и улучшив эффекты затухания. 00:23 Работа с кнопками • Добавление элементов внутри кнопки: использование панели стека для размещения ярлыков. • Изменение ориентации кнопки на горизонтальную. • Вставка изображений и значков слева от кнопок. 01:45 Использование шрифтов для значков • Загрузка шрифтов с GitHub или другого источника. • Создание папки «шрифты» в разделе «Ресурсы». • Вставка фосфорных шрифтов и шрифта Aco Pro. 02:52 Настройка шрифтов в Avalonia • Изменение действия «Создать» на «ресурсы Avalonia». • Создание семейства шрифтов и настройка путей к шрифтам. • Указание фактического названия шрифта в Windows и его физического имени. 05:16 Применение шрифтов • Назначение шрифта окну верхнего уровня для каскадного распространения. • Использование селектора window и свойства семейства шрифтов. • Исправление смещения шрифта с помощью отступов. 08:24 Работа с фосфорными шрифтами • Импорт фосфорных шрифтов в приложение XAML. • Создание класса иконок и ввод значений в юникоде. • Пример ввода юникода для символа «дом». 10:10 Ввод юникодов • Объяснение способа ввода юникодов с использованием хэш-тегов. • Пример ввода юникода для символа «uplius». 10:42 Работа со стилями и шрифтами • Важно ставить точку с запятой в конце кода, чтобы избежать ошибок компиляции. • Исправление проблем с выравниванием шрифтов с помощью значков и класса. • Создание стиля для кнопок и надписей, настройка отступов. 11:40 Настройка семейства шрифтов • Применение точечных значков к различным элементам интерфейса. • Настройка свойства семейства шрифтов и люминофорной заливки. • Использование точечного контроля для более гибкой настройки шрифтов. 12:27 Работа с отступами и полями • Настройка отступов для элементов интерфейса. • Копирование и вставка кода для создания пользовательского элемента управления. • Обновление юникодов для соответствия значкам. 13:36 Настройка значка «Настройки» • Создание сетки и строки для значка «Настройки». • Решение проблемы с центрированием значка при использовании полей вместо отступов. • Эксперименты с различными стилями для кнопки «Настройки». 14:27 Исправление ошибок со шрифтом • Временное удаление отступов для демонстрации ошибки в высоте шрифта. • Применение класса «echo» для исправления ошибок со шрифтом. • Настройка стилей для кнопок с разными комбинациями текста и значков. 16:58 Прозрачные кнопки • Добавление прозрачного стиля для кнопок. • Настройка свойства background для прозрачных кнопок. • Проверка работы прозрачных кнопок в реальном приложении. 19:15 Анимация кнопок • Настройка анимации масштабирования текста при наведении курсора. • Определение значения по умолчанию для масштаба рендеринга. • Игнорирование радиуса поворота при масштабировании надписей. 22:18 Завершение настройки анимации • Настройка переходов для анимации кнопок. • Оживление кнопок путём изменения цвета и масштаба. • Финальная проверка работы анимации. 22:44 Настройка переходов • Создаём новый массив переходов для масштабирования. • Устанавливаем длительность перехода в 0,1 секунды. • Проверяем анимацию масштабирования. 23:31 Анимация цвета фона • Копируем переходы для цвета фона. • Масштабируем весь контент, а не только ярлык. • Применяем внутренние переходы для цвета фона. 24:41 Проверка анимации • Проверяем продолжительность анимации. • Анимируем изменение переднего плана от белого до светло-белого. • Убеждаемся, что анимация работает. 25:02 Настройка свойств • Настраиваем свойство render transform по умолчанию. • Включаем анимацию переходов. • Проверяем работу анимации. 26:04 Визуализация приложения • Сравниваем макет и реальное приложение. • Отмечаем приятный эффект при наведении курсора. • Настраиваем отступы и шрифт по вкусу. 26:26 Настройка шрифтов • Выбираем семейство шрифтов для прозрачности. • Устанавливаем семейство шрифтов «динамический ресурс» или «люминофор». • Исправляем ошибку с значком на этикетке. 27:32 Завершение работы • Добавляем пользовательские шрифты и исправляем ошибки. • Добавляем анимацию на кнопки. • Планируем следующую работу: создание моделей просмотра и навигация по страницам.