[SwiftUI Project] Skeleton Placeholder & Blink Animation 만들기

스켈레톤 플레이스홀더와 블링크 애니메이션

화면이 로딩 중일 때, 네트워크가 연결되지 않았을 때 나타나게 될 플레이스 홀더 입니다. 

사라졌다 나타나는 Blink animation도 추가하였습니다.

 

작성은 생각보다 간편합니다. 

struct CoinPlaceholderView: View {
    
    let coin: CoinModel
    @State private var opacity: Double = 1
    
    var body: some View {
        HStack(spacing: 0) {
            leftColumn
            Spacer()
            rightColmn
        }
        .padding()
        .contentShape(Rectangle())
        .redacted(reason: .placeholder) // 스켈레톤 플레이스 홀더
        .opacity(opacity) // 여기서부터 Blink Animation
        .onAppear {
            withAnimation {
                opacity = 0.2
            }
        }
        .animation(Animation.easeInOut(duration: 1.5).repeatForever(autoreverses: true), value: opacity)
    }
}

 

사용 할 때는 다음과 같이 사용할 수 있습니다. 

VStack {
  ForEach(0..<5) { i in
    CoinPlaceholderView()
  }
}

 

 

 

Redacted 참고 유튜브: 

Blink Animation 참고 문서: 

Button blink animation with SwiftUI