Shimmer Effect in SwiftUI

Shimmering effects can add a touch of sophistication and dynamism to your SwiftUI applications. They’re often used in loading screens or to highlight certain elements on the screen. In this article, we’ll explore how to implement shimmering effects in SwiftUI with some code examples.

What is a Shimmer Effect?

A shimmer effect is a visual effect used in UI design where an animated shiny light passes over an object or text, giving the impression that the object is shimmering or gleaming. This effect can be used to indicate loading or fetching of data, drawing attention to certain elements, or simply adding a bit of flair to your app’s design.

Implementing Shimmer Effect in SwiftUI

To create a shimmer effect in SwiftUI, we’ll use a combination of gradients, masks, and animation. Here’s a simple example:

struct ShimmerView: View {
    
    @State private var shimmering = false
    
    let streamSnow = #colorLiteral(red: 0.9999960065, green: 1, blue: 1, alpha: 1)
    let streamGray = #colorLiteral(red: 0.5741485357, green: 0.5741624236, blue: 0.574154973, alpha: 1)
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [Color(streamSnow), Color(streamGray)]),
                       startPoint: .leading,
                       endPoint: shimmering ? .trailing : .leading)
        .frame(width: 200, height: 40)
        .mask(RoundedRectangle(cornerRadius: 10))
        .animation(.easeOut(duration…