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 Настройка переходов Создаём новый массив переходов для масштабирования. Устанавливаем длительность перехода в 01 секунды. Проверяем анимацию масштабирования. 23:31 Анимация цвета фона Копируем переходы для цвета фона. Масштабируем весь контент а не только ярлык. Применяем внутренние переходы для цвета фона. 24:41 Проверка анимации Проверяем продолжительность анимации. Анимируем изменение переднего плана от белого до светло-белого. Убеждаемся что анимация работает. 25:02 Настройка свойств Настраиваем свойство render transform по умолчанию. Включаем анимацию переходов. Проверяем работу анимации. 26:04 Визуализация приложения Сравниваем макет и реальное приложение. Отмечаем приятный эффект при наведении курсора. Настраиваем отступы и шрифт по вкусу. 26:26 Настройка шрифтов Выбираем семейство шрифтов для прозрачности. Устанавливаем семейство шрифтов динамический ресурс или люминофор. Исправляем ошибку с значком на этикетке. 27:32 Завершение работы Добавляем пользовательские шрифты и исправляем ошибки. Добавляем анимацию на кнопки. Планируем следующую работу: создание моделей просмотра и навигация по страницам.,

#