[Pulse ViewModifier] Pulse SwiftUI ViewModifier #SwiftUI #ViewModifier

Pulse.md

Pulse.swift

// Kieran Brown
// Kieran's Components "Pulse and Sheen"
// https://kieranb662.github.io/blog/2020/04/17/Pulse-and-Sheen

struct PulseEffect<S: Shape>: ViewModifier {
    var shape: S
    @State var isOn: Bool = false
    var animation: Animation {
        Animation
            .easeIn(duration: 1)
            .repeatCount(8, autoreverses: false)
    }

    func body(content: Content) -> some View {
        content
            .background(
                ZStack {
                    shape
                        .stroke(Color.yellow, lineWidth: 1)
                        .scaleEffect(self.isOn ? 2 : 1)
                        .opacity(self.isOn ? 0 : 1)
                    shape
                        .stroke(Color.blue)
            })
            .onAppear {
                withAnimation(self.animation) {
                    self.isOn = true
                }
        }
    }
}

public extension View {
    func pulse<S: Shape>(_ shape: S) -> some View  {
        self.modifier(PulseEffect(shape: shape))
    }
}

I made this a bit more configurable for me:

struct PulseEffect<S: Shape>: ViewModifier {
    let shape: S
    let color: Color
    let fromScale: CGFloat
    let toScale: CGFloat
    let fromOpacity: CGFloat
    let toOpacity: CGFloat
    @State private var isOn: Bool = false

    var animation: Animation {
        Animation
            .easeIn(duration: 1)
            .repeatForever(autoreverses: false)
    }

    func body(content: Content) -> some View {
        content
            .background(
                shape
                    .stroke(color, lineWidth: 1)
                    .scaleEffect(isOn ? toScale : fromScale)
                    .opacity(isOn ? fromOpacity : toOpacity)
            )
            .onAppear {
                withAnimation(animation) {
                    isOn = true
                }
            }
    }
}

public extension View {
    func pulse<S: Shape>(
        _ shape: S,
        color: Color,
        fromScale: CGFloat = 1,
        toScale: CGFloat = 1.3,
        fromOpacity: CGFloat = 0,
        toOpacity: CGFloat = 0.7
    ) -> some View  {
        self.modifier(
            PulseEffect(
                shape: shape,
                color: color,
                fromScale: fromScale,
                toScale: toScale,
                fromOpacity: fromOpacity,
                toOpacity: toOpacity
            )
        )
    }
}