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

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

Режимы смешивания, как следует из названия, смешивают цвета нескольких слоев пикселей, используя математические формулы для определения влияния каждого пикселя на конечное изображение. Вы можете объединить любое количество слоев, но как минимум нужны 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. Регистрация открыта по ссылке.