RainbowDashlineAnimation.swift

RainbowDashlineAnimation.swift

//
//  Created by Matthew Young on 10/4/23.
//

import SwiftUI

struct MatchedInnerOuterCornerRadius: View {
    @State private var phase = Double.zero
    
    var body: some View {
        VStack {
            Color.clear.aspectRatio(2.5, contentMode: .fit)
                .overlay {
                    Text("Happy New Year!")
                }
            doubleRoundedRectangle
            Color.clear.aspectRatio(1, contentMode: .fit)
                .overlay {
                    Text("Merry Christmas!")
                }
        }
    }
    
    var doubleRoundedRectangle: some View {
        ZStack {
            // outter
            RoundedRectangle(cornerRadius: 35.0)
                .stroke(
                    style: .init(
                        lineWidth: 10,
                        lineCap: .butt,
                        lineJoin: .miter,
                        miterLimit: .zero,
                        dash: [5, 2, 17, 2, 5],
                        dashPhase: phase
                    )
                )
                .foregroundStyle(
                    .linearGradient(
                        .init(colors: repeatElement([Color.red, .orange, .yellow, .green, .blue, .purple, .red], count: 20).flatMap { $0 }),
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                )

            RoundedRectangle(cornerRadius: 20.0)
                .stroke(.red, lineWidth: 4)
                .fill(.mint.gradient)
                .padding(15)
        }
        .padding()
        .onAppear {
            withAnimation(.default.speed(0.25).repeatForever(autoreverses: false)) {
                phase = 300
            }
        }
        .overlay {
            Text("👍😎😘")
                .font(.system(size: 80))
                .shadow(color: .black, radius: 10, x: 1, y: 1)
        }
    }
}

#Preview {
    MatchedInnerOuterCornerRadius()
}