BlendMode

🏁 학습할 내용

• BlendMode
  • 정의
  • 사용하는 목적
  • 종류

---

🌈 BlendMode

 

✅ 정의

 

2개의 뷰를 겹칠 때, 어떻게 섞을 지 결정하는 방식이다.

여기서 중요한 점은 2개의 뷰 중 어떤 뷰에 적용을 해줘야할까?

 

정답은 앞에 있는 뷰에 적용한다.

 

배경뷰와 겹친 부분에 효과를 적용하는 것이기 때문에 앞에 있는(효과가 들어갈) 뷰에 적용한다, 

 

🎯 사용하는 목적

즉, 디자인을 더 예쁘고, 눈에 띄게 만들기 위해 쓰는 도구

 

일반적인 예

• 이미지나 뷰에 특별한 시각 효과를 주고 싶을 때
• 텍스트나 도형을 배경과 자연스럽게 섞고 싶을 때
• 어두운/밝은 느낌, 조명 효과 등을 코드로 제어하고 싶을 때

 

🎨 종류

기본 형태는 다음 코드와 사진으로 진행한다.

  public var body: some View {
    HStack {
      Color.red.frame(width: 50, height: 50, alignment: .center)

      Color.green.frame(width: 50, height: 50, alignment: .center)
        .rotationEffect(.degrees(45))
        .padding(-20)

    }
  }

🌑 Darkening

배경보다 어두운 색이 남는 방식

• multiple: 어두운 영역은 더 어두워짐
• darken: 두 색 중 더 어두운 쪽으로
• colorBurn: 배경과 전경의 대비를 높이면서 어둡게함
• plusDarker: 두 색상을 더해,  어두운 쪽으로 선택 

🔆 Lightening

배경보다 밝은 색이 남는 방식

• lighten: 두 색 중 더 밝은 쪽으로
• screen: 색을 반대로 곱하고 다시 반전 
• colorDodge: 배경과 전경의 대비를 높이면서 밝게
• plusLighter: 두 색상을 더해,  밝은 쪽 선택

✨ Contrast

색 대비를 강조하는 용도

• overlay: multiply + screen 조합. 배경에 따라 밝거나 어둡게
• softLight: 부드럽게 빛나는 효과
• hardLight: 강하게 빛나는 효과

🪞 Inverting

색을 반전시키거나 반전된 색을 기반으로 연산하는 블랜딩 모드

• difference: 배경과 전경 차이만 남김 
• exclusion: difference보다 더 부드럽게 반전됨

🖍️ Mixing color component

RGB 색상, 채도, 밝기 같은 개별 요소에 적용

• hue: 배경의 밝기+채도에 위 뷰의 색상(Hue) 를 입힘
• saturation: 배경의 밝기+색상에 위 뷰의 채도(Saturation) 를 입힘
• color: 배경의 밝기에 위 뷰의 색상+채도를 입힘
• luminosity: 배경의 색상+채도에 위 뷰의 밝기(Lightness) 를 입힘

🧮  Accessing proter-duff modes

픽셀을 어떻게 그릴까를 수학적으로 정의한 모델

• sourceAtop: 기본값, 배경위에 전경이 그려짐
• destinationOver: 배경이 전경위에 올라옴
• destinationOut: 배경이 전경과 겹치지 않는 부분만 보존되고, 겹치는 부분은 투명처리

---

출처

BlendMode | Apple Developer Documentation

 

32. globalCompositeOperation - 색상 블렌딩모드 (합성)