Demonstrates animating points in a path in PureSwiftUI

AnimatedHeartDemo.swift

//
//  AnimatedHeartDemo.swift
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
//  of the Software, and to permit persons to whom the Software is furnished to do so,
//  subject to the following conditions:
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
//  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
//  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
//  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
//  AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
//  WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
//  Created by Adam Fordyce on 08/02/2020.
//  Copyright © 2020 Adam Fordyce. All rights reserved.
//

import SwiftUI
import PureSwiftUI

private let heartColor = Color(red: 0.880, green: 0.123, blue: 0.150)
private let gridConfig = LayoutGuideConfig.grid(columns: 8, rows: 10)

private struct HeartShape: Shape {
    var scale: CGFloat
    let showControlPoints: Bool

    var animatableData: CGFloat {
        get {
            scale
        }
        set {
            scale = newValue
        }
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        var grid = gridConfig.layout(in: rect)
        let startRect = CGRect(from: grid[3, 4], to: grid[5, 6])
        
        let p1 = grid[0, 3].to(startRect.leading, scale)
        let p1cp1 = grid[0, 0].to(startRect.topLeading, scale)
        let p1cp2 = grid[3, -1].to(startRect.topLeading, scale)
        
        let p2 = grid[4, 2].to(startRect.top, scale)
        let p2cp1 = grid[5, -1].to(startRect.topTrailing, scale)
        let p2cp2 = grid[8, 0].to(startRect.topTrailing, scale)
        
        let p3 = grid[8, 3].to(startRect.trailing, scale)
        let p3cp1 = grid[8, 5].to(startRect.bottomTrailing, scale)
        let p3cp2 = grid[5, 7].to(startRect.bottomTrailing, scale)
        
        let p4 = rect.bottom.to(startRect.bottom, scale)
        let p4cp1 = grid[3, 7].to(startRect.bottomLeading, scale)
        let p4cp2 = grid[0, 5].to(startRect.bottomLeading, scale)

        path.move(p1)
        path.curve(p2, cp1: p1cp1, cp2: p1cp2, showControlPoints: showControlPoints)
        path.curve(p3, cp1: p2cp1, cp2: p2cp2, showControlPoints: showControlPoints)
        path.curve(p4, cp1: p3cp1, cp2: p3cp2, showControlPoints: showControlPoints)
        path.curve(p1, cp1: p4cp1, cp2: p4cp2, showControlPoints: showControlPoints)
        return path
    }
}

struct AnimatedHeartDemo_Previews: PreviewProvider {
    struct AnimatedHeartDemo_Harness: View {

        @State private var toggle = false
        var body: some View {
            HStack(spacing: 50) {
                HeartShape(scale: toggle ? 0 : 1, showControlPoints: true)
                    .stroke(style: .init(lineWidth: 2, lineJoin: .round))
                    .layoutGuide(gridConfig)
                HeartShape(scale: toggle ? 0 : 1, showControlPoints: false)
                    .fillColor(heartColor)
                .onAppear {
                    withAnimation(Animation.easeInOut(duration: 2).repeatForever().delay(1)) {
                        self.toggle.toggle()
                   }
               }
            }
           
            .frame(450, 200)
        }
    }

    static var previews: some View {
        AnimatedHeartDemo_Harness()
            .previewSizeThatFits()
            .padding(40)
            .showLayoutGuides(true)
    }
}