Blog: Capture Xcode Playground SwiftUI animations as mp4

BlogCaptureXcodePlayground.swift

/**
 * **Step 1**: Animation
 *
 * This is the accompayning code of a blog post. Read more at https://eschmann.dev
 */

import SwiftUI
import PlaygroundSupport

struct MyExperimentalView: View {
    @State var startAngle: Double = 135.0
    @State var progress: Double = 10.0

    var body: some View {
        ZStack {
            /// Background color
            Color.purple

            /// Shape with gradient along path
            PathAlongCircle(
                startAngle: startAngle,
                progress: progress
            )
            .foregroundColor(.white)
            .mask {
                AngularGradient(
                    gradient: Gradient(colors: [.clear, .white]),
                    center: .center,
                    startAngle: .degrees(startAngle - 15.0),
                    endAngle: .degrees(startAngle + progress + 15.0)
                    /// ^-- Increase gradient range slightly to include the rounded tips
                )
            }

            /// Outline
            PathAlongCircle(startAngle: startAngle, progress: progress)
                .stroke(.white, lineWidth: 4)
                .opacity(1.0)

        }
        .frame(width: 320, height: 320)
        .onAppear {
            withAnimation(.easeInOut(duration: 0.7).repeatForever(autoreverses: true)) {
                progress = 270.0
            }
        }
    }
}

struct PathAlongCircle : Shape {
    var startAngle: Double
    var progress: Double

    func path(in rect: CGRect) -> Path {
        var p = Path()

        p.addArc(
            center: CGPoint(x: 160, y:160),
            radius: 80,
            startAngle: .degrees(startAngle),
            endAngle: .degrees(startAngle + progress),
            clockwise: false
        )

        return p.strokedPath(.init(lineWidth: 60, lineCap: .round))
    }

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }
}

let view = MyExperimentalView()
PlaygroundPage.current.setLiveView(view)