Смешивание цветов в SwiftUI

В последней версии SwiftUI компания Apple представила новую функцию — смешивание цветов. Это функция, которая позволяет выполнять различные творческие задачи. В этой статье мы рассмотрим смешивание цветов в SwiftUI и изучим возможности его применения.

Начнем с простого примера, демонстрирующего использование функции смешивания цветов.

struct ContentView: View {
    var body: some View {
        Color.blue.mix(with: .red, by: 0.5)
    }
}

struct ContentView: View {

    var body: some View {

        Color.blue.mix(with: .red, by: 0.5)

    }

}

Как видно из приведенного примера, в структуре Color появилась новая функция mix. Эта функция принимает три параметра. Первый параметр задает цвет, с которым вы собираетесь смешивать. Второй параметр представляет собой долю основного цвета в смешиваемом.

Третий параметр задает цветовое пространство для смешивания. По умолчанию используется цветовое пространство восприятия, которое близко к распознаванию цвета человеческим глазом. В качестве альтернативы можно выбрать цветовое пространство устройства, что несколько изменяет конечный результат и интерполирует цвета в цветовом пространстве устройства.

struct ContentView: View {
    @State private var fraction = 0.5
    
    var body: some View {
        Color.blue.mix(with: .red, by: fraction, in: .device)
            .overlay {
                Slider(value: $fraction, in: 0...1)
            }
            .animation(.default, value: fraction)
    }
}

xxxxxxxxxx

struct ContentView: View {

    @State private var fraction = 0.5

    var body: some View {

        Color.blue.mix(with: .red, by: fraction, in: .device)

            .overlay {

                Slider(value: $fraction, in: 0...1)

            }

            .animation(.default, value: fraction)

    }

}

Помните, что функция mix полностью анимируема, и для ее анимации можно использовать модификатор представления animation.

Теперь, когда мы поняли, как использовать смешивание цветов в SwiftUI, давайте рассмотрим его практическое применение в наших приложениях. Будучи разработчиком приложения для измерения пульса, я сразу же подумал об использовании смешивания цветов для закрашивания динамически меняющимся цветом представления состояния пульса.

struct HeartRateStatusView: View {
    let recentHeartRate: Double
    let maxHeartRate: Double
    
    var body: some View {
        RoundedRectangle(cornerRadius: 2)
            .fill(Color.blue.mix(with: .red, by: recentHeartRate / maxHeartRate))
            .animation(.bouncy, value: recentHeartRate / maxHeartRate)
            .frame(height: 8)
    }
}

xxxxxxxxxx

struct HeartRateStatusView: View {

    let recentHeartRate: Double

    let maxHeartRate: Double

    var body: some View {

        RoundedRectangle(cornerRadius: 2)

            .fill(Color.blue.mix(with: .red, by: recentHeartRate / maxHeartRate))

            .animation(.bouncy, value: recentHeartRate / maxHeartRate)

            .frame(height: 8)

    }

}

Как видите, я комбинирую пульс пользователя с максимально возможным значением пульса, чтобы определить соотношение смешивания синего и красного цветов, представляющих нормальный и повышенный пульс.

Еще одно интригующее применение смешивания цветов — это возможности динамического тематического оформления. Например, мы можем использовать смешение цветов для создания плавного перехода между светлыми и темными цветами в приложении в течение дня.

struct Theme {
    let light: Color
    let dark: Color
    
    func resolve() -> Color {
        let hour = Calendar.current.component(.hour, from: .now)
        return dark.mix(with: light, by: Double(hour) / 24.0)
    }
}

xxxxxxxxxx

struct Theme {

    let light: Color

    let dark: Color

    func resolve() -> Color {

        let hour = Calendar.current.component(.hour, from: .now)

        return dark.mix(with: light, by: Double(hour) / 24.0)

    }

}

Мы используем текущий час дня, полученный из календаря, чтобы вычислить долю прошедшего дня. Это дробное значение затем используется в качестве параметра для смешивания цветов.

Функция смешивания цветов в SwiftUI предоставляет огромные возможности для улучшения визуальной привлекательности ваших приложений. Любое представление, использующее цвета в качестве индикатора состояния, может извлечь большую пользу из смешивания цветов. Например, индикатор приоритета может использовать приоритет задачи, события календаря или любой другой сущности, которая облегчает вычисление фракции смешивания.

let eventPriority: Double
let maximalPriority: Double

Color.gray.mix(with: .red, by: eventPriority / maximalPriority)

xxxxxxxxxx

let eventPriority: Double

let maximalPriority: Double

​

Color.gray.mix(with: .red, by: eventPriority / maximalPriority)

Мы можем начать с использования системных цветов, предоставляемых SwiftUI, а затем применить смешивание цветов на основе пользовательского ввода для создания визуально привлекательных и динамичных цветовых схем в наших приложениях.

Надеюсь, этот пост вдохновит вас на создание более креативных приложений, используя возможности смешивания цветов. Спасибо, что прочитали, и до встречи на следующей неделе!

Источник