[SwiftUI-기초] BlendMode - 색상 혼합

ZStack {
    Image("Example")

    Rectangle()
        .fill(.red)
        .blendMode(.normal)
}
.frame(width: 400, height: 500)
.clipped()

.blendMode(.normal)

• 기본적인 전략으로 색상이 섞이지 않음

.blendMode(.multiply)

• 각 픽셀마다
• 이미지가 가지고 있는 원래 색상 X 색상 프레임이 가지고 있는 도착지 픽셀의 색상
• 0...1 * 0...1 = 0...1

Image("Example")
    .colorMultiply(.red)

• ZStack 을 사용하지 않고도 적용 가능

 

.blendMode(.screen)

• 원래 색상의 역을 곱해서 나온 값의 역
• (1 - (0...1)) * (1 - (0...1)) = a
• screen : 1 - a 
• 더 밝은 색을 가지는 경향이 있음 

screen 샘플 코드

struct ContentView: View {
    @State private var amount = 0.0

    var body: some View {
        VStack {
            ZStack {
                Circle()
                    .fill(.red)
                    .frame(width: 200 * amount)
                    .offset(x: -50, y: -80)
                    .blendMode(.screen)

                Circle()
                    .fill(.green)
                    .frame(width: 200 * amount)
                    .offset(x: 50, y: -80)
                    .blendMode(.screen)

                Circle()
                    .fill(.blue)
                    .frame(width: 200 * amount)
                    .blendMode(.screen)
            }
            .frame(width: 300, height: 300)

            Slider(value: $amount)
                .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.black)
        .ignoresSafeArea()
    }
}

• 겹치는 구간에서 .screen이 어떻게 적용되는지 확인 가능
• 정가운데는 완벽한 흰색이 아님
• Swift의 .red 컬러는 진짜 빨강색이 아니라, 모바일 환경에서 더 잘 인식되도록 편집한 레드여서 그렇다.
• 아래의 코드로 수정

.fill(Color(red: 1, green: 0, blue: 0))
.fill(Color(red: 0, green: 1, blue: 0))
.fill(Color(red: 0, green: 0, blue: 1))

쨍한 색감

saturation, blur

• saturation: 색상 포화도
  • 0: 흑백
  • 1: 완전 컬러풀
• blur: 희미한 정도
  • 0: 선명
  • N: 흐릿

Image("Example")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .saturation(amount)
    .blur(radius: (1 - amount) * 20)