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

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

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

Режимы наложения в SwiftUI

SwiftUI поддерживает следующие режимы смешивания:

public enum BlendMode : Sendable {
    case normal
    case multiply
    case screen
    case overlay
    case darken
    case lighten
    case colorDodge
    case colorBurn
    case softLight
    case hardLight
    case difference
    case exclusion
    case hue
    case saturation
    case color
    case luminosity
    case sourceAtop
    case destinationOver
    case destinationOut
    case plusDarker
    case plusLighter
}

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

Однако для простоты в примерах в этой статье будет использоваться только изображение.

Вот примерный код SwiftUI, который я буду использовать для изучения различных режимов смешивания:

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .trailing) {
            Image("porsche")
                .resizable()
                .scaledToFill()
            
            Rectangle()
                .fill(Color.red)
                .frame(height: 178)
        }
        .frame(width: 533, height: 355)
    }
}

Результат исполнения кода выше:

Нормальный (Normal)

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

Итак, добавив .blendMode(.normal) к Rectangle , мы получаем изображение, идентичное нашему исходному:

Умножение (Multiply)

Режим смешивания «Multiply» затемняет изображение, умножая цветовые значения [RGB] верхнего и нижнего слоев. Он отлично подходит для добавления теней и создания глубины.

Поскольку значения цвета находятся в диапазоне от 0 до 255, умножение обоих значений и последующее деление на 255 упрощает нормализацию результата в этом диапазоне.

Экран (Screen)

Режим смешивания экрана осветляет изображение, комбинируя цветовые значения слоев. Он полезен для бликов и создания светящегося/мечтательного эффекта.

Наложение (Overlay)

Режим смешивания overlay улучшает текстуры, увеличивая контраст, затемняя темные области и осветляя светлые области. Он объединяет режимы multiple и screen, основанные на значениях пикселей нижнего слоя.

Жесткий свет (Hard Light)

Hard Light применяет те же принципы, что и overlay, но меняет роли слоев.

Он увеличивает контрастность, учитывая яркость верхнего слоя, что делает его идеальным для драматических световых эффектов.

Оба режима смешивания усиливают контрастность, но overlay фокусируется на яркости нижнего слоя, в то время как Hard Light фокусируется на яркости верхнего слоя. Overlay обычно используется для улучшения текстур и добавления глубины, тогда как Hard Light предпочтителен для создания интенсивных световых эффектов и драматических бликов или теней.

Color Dodge

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

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

А также приходите на бесплатный вебинар нашего курса IOS Developer. Регистрация открыта по ссылке.