[ThirdParty] SwiftUI-Shimmer 해석하기

👋 들어가기 전

로딩을 위해, 인디케이터를 돌릴 수도 있지만, 보여질 컨텐츠의 형태를 많이 보여주는

Shimmer Effect가 최근에 많이 보이는 것 같다.

 

이번에는 SwiftUI에서 SwiftUI-Shimmer 라이브러리를 해석해보고, 

 

사용되는 개념 중, 모르는 것들을 따로 정리해보자.

---

🏁 학습할 내용

• 생소한 개념들
  • @Environment(\.layoutDirection)
  • BlendMode
  • RedactionReasons
• 프로퍼티 분석

---

❓ 생소한 개념

@Environment(\.layoutDirection)

컨텐츠가 그려질 방향 (LTR, RTL) 

 

자세한 링크: https://hamp.tistory.com/244

 

BlendMode

두 뷰가 겹칠 때 어떻게 처리될 것인가??

 

자세한 링크: https://hamp.tistory.com/245

RedactionReasons

데이터를 가리는 이유를 열려줘

 

자세한 링크: https://hamp.tistory.com/246

---

📌 프로퍼티 분석

    public enum Mode { /// Gradient를 어떻게 활용할지 
        case mask /// 컨텐츠 마스킹
        case overlay(blendMode: BlendMode = .sourceAtop) /// 겹치기 
        case background /// 뒤에 배치
    } 

    private let animation: Animation // 적용할 애니메이션 
    private let gradient: Gradient // 적용할 Gradient 
    private let min, max: CGFloat // 영역의 최소 최대 범위
    private let mode: Mode // 위에 선어난 모드 
    @State private var isInitialState = true
    @Environment(\.layoutDirection) private var layoutDirection // 컨텐츠 표시 방햐아 (LTR or RTL)

    var startPoint: UnitPoint {
        if layoutDirection == .rightToLeft { // RTL
            isInitialState ? UnitPoint(x: max, y: min) : UnitPoint(x: 0, y: 1)
        } else { // LTR 
            isInitialState ? UnitPoint(x: min, y: min) : UnitPoint(x: 1, y: 1)
        }
    }

    /// The end unit point of our gradient, adjusting for layout direction.
    var endPoint: UnitPoint {
        if layoutDirection == .rightToLeft { // RTL
            isInitialState ? UnitPoint(x: 1, y: 0) : UnitPoint(x: min, y: max)
        } else { // LTR
            isInitialState ? UnitPoint(x: 0, y: 0) : UnitPoint(x: max, y: max)
        }
    }
    
        /*
     Calculating the gradient's animated start and end unit points:
     min,min
        \
         ┌───────┐         ┌───────┐
         │0,0    │ Animate │       │  "forward" gradient
     LTR │       │ ───────►│    1,1│  / // /
         └───────┘         └───────┘
                                    \
                                  max,max
                max,min
                  /
         ┌───────┐         ┌───────┐
         │    1,0│ Animate │       │  "backward" gradient
     RTL │       │ ───────►│0,1    │  \ \\ \
         └───────┘         └───────┘
                          /
                       min,max
     */

🏎️ startPoint와 endPoint

다른 부분은 이해가 됐지만 point 쪽을 조금 더 살펴보자.

LTR 기준으로 해석한다.

지금 보면 왼쪽위에서 -> 오른쪽아래로 검은색이 흘러간다.

그림으로 살펴보자.

먼저 startPoint와 endPoint는 이렇게 위치한다.

 

여기서 하얀 색 사각의 너비(높이)가 bandSize가 된다.

• min = 0 - bandSize
• max = 1 + bandSize

이후 이동 경로는 다음과 같다.

startPoint는 (min, min) 왼쪽 바깥에서, (1, 1) 오른쪽 아래 끝에 이동한다.

endPoint는 (0, 0) 왼쪽 위 끝에서, (max, max) 오른쪽 바깥으로 이동한다.

---

출처

https://github.com/markiv/SwiftUI-Shimmer

GitHub - markiv/SwiftUI-Shimmer: Shimmer is a super-light modifier that adds a shimmering effect to any SwiftUI View, for exampl