Расширения цветов, предоставляемые .NET MAUI Community Toolkit, позволяют анимировать изменение цветов или преобразовывать цвета в определенных ситуациях. Взгляните сами!
Цвета — это «язык» общения, который позволяет нам понять действие еще до того, как мы прочитаем какой-либо текст.
Например, когда мы видим метку красного цвета, мы сразу связываем ее с ошибкой, еще до того, как читаем текст самого сообщения. Вот почему цвета являются столь важной частью наших приложений и почему мы должны использовать их в свою пользу при создании пользовательских интерфейсов.
Теперь представьте, что можно пойти дальше и поиграть с этими цветами по-разному, например, плавно анимируя компонент при переходе от одного цвета к другому.
Для этого и многих других полезных сценариев .NET MAUI Community Toolkit предоставляет расширения цветов (Color Extensions). В этой статье мы рассмотрим некоторые из моих любимых! 💚
Что такое методы расширения? 🤔
Как определяет их официальная документация:
«Методы расширения позволяют добавлять новую функциональность в существующие типы без изменения исходного типа».
«Методы расширения позволяют добавлять новую функциональность в существующие типы без изменения исходного типа».
Другими словами, они позволяют нам расширять возможности существующих классов и использовать эти новые функции самым естественным образом во всем нашем коде.
А что такое расширения цветов?
Рассматриваемые нами расширения цветов доступны через .NET MAUI Community Toolkit. В этой статье мы будем работать с ColorAnimationExtensions и ColorConversionExtensions.
Поэтому, прежде чем начать, убедитесь, что вы добавили соответствующий пакет NuGet:
И добавьте следующее в свой код:
➖ Для ColorAnimationExtensions:
➖ Для ColorConversionExtensions:
Изучение ColorAnimationExtensions
Эти расширения позволяют нам анимировать цвета в пользовательском интерфейсе, создавая плавные переходы от одного цвета к другому.
Цвет фона
BackgroundColorTo позволяет анимировать свойство BackgroundColor для VisualElement.
Он принимает следующие параметры:
- Color: целевой цвет анимации.
- Rate: временной интервал между каждым кадром анимации. Значение по умолчанию — 16 миллисекунд. (Необязательно)
- Duration: общая продолжительность анимации. Значение по умолчанию — 250 миллисекунд. (Необязательно)
- Easing: определяет ход анимации, например, ускоряется она или замедляется. Значение по умолчанию — null. (Необязательно)
Давайте посмотрим на пример!
Если мы хотим анимировать цвет фона кнопки от розового до синего, мы можем сделать это следующим образом:
В вашем XAML:
В вашем коде C#:
Результат должен выглядеть следующим образом:
Цвет текста
TextColorTo позволяет плавно переводить текст из одного цвета в другой с помощью анимации. 📔 Вы можете использовать те же параметры, которые мы ранее рассмотрели для расширения BackgroundColorTo.
Давайте посмотрим на пример!
Если мы хотим анимировать цвет текста от розового до синего, мы можем сделать это следующим образом:
В вашем XAML:
В вашем коде C#:
Результат должен выглядеть следующим образом:
Теперь давайте изучим некоторые ColorAnimationExtensions
ToBlackOrWhite
Представьте, что у вас есть приложение, в котором цвет фона кнопки динамически меняется в зависимости от определенных условий. Вы заранее не знаете, каким будет цвет фона, и использование фиксированного цвета текста может затруднить чтение текста.
Например, если у кнопки черный фон, вы можете использовать белый текст. Но если фон меняется на желтый, лучшим выбором будет черный текст.
Расширение ToBlackOrWhite помогает обрабатывать подобные сценарии, преобразуя цвет в черный или белый, что помогает сохранять читаемость пользовательского интерфейса вашего приложения.
Как поясняется в официальной документации:
«Этот метод преобразует цвет в монохромное значение Colors.Black или Colors.White».
«Этот метод преобразует цвет в монохромное значение Colors.Black или Colors.White».
Использовать его очень просто:
И ваш код C#:
IsDark
Это расширение позволяет определить, считается ли цвет темным. Например, черный цвет — темный, а белый — нет. Оно возвращает логическое значение (boolean).
Использовать IsDark очень просто:
В этом случае результатом будет true.
ToInverseColor
Расширение ToInverseColor позволяет получить инвертированный цвет. Например, в этом случае инверсией черного будет белый:
WithRed, WithGreen, WithBlue
Это расширение позволяет изменять только красный компонент существующего цвета, оставляя остальные цветовые компоненты без изменений.
Например:
В этом случае цвет меняется с RGB(50, 100, 150) на RGB(200, 100, 150).
Вы также можете использовать WithGreen() и WithBlue() для изменения зеленого или синего компонентов цвета.
ToRgbString
Это расширение позволяет преобразовать цвет в строку, содержащую его значения красного, зеленого и синего (RGB).
В этом случае результатом будет: RGB(255,0,0).
Заключение
Вот и все! Это некоторые из моих любимых и наиболее полезных расширений цветов из .NET MAUI Community Toolkit. Есть и много других интересных вариантов, которые я настоятельно рекомендую вам изучить!
Эти расширения помогут вам сэкономить код и облегчат работу с цветами в ваших приложениях. Так что попробуйте их и начните внедрять в свою повседневную разработку .NET MAUI! 🚀
Спасибо за чтение! 💚
Ссылки:
