feat(view): 增加动画效果

增加发牌动效，增加倒计时动效

Signed-off-by: Ching <loooching@gmail.com>

Memorize.xcodeproj/project.pbxproj

@@ -7,22 +7,30 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		240EBF09299CFCE900429C8A /* Cardify.swift in Sources */ = {isa = PBXBuildFile; fileRef = 240EBF08299CFCE900429C8A /* Cardify.swift */; };
 		240EDC3F2998A3B900A46AC9 /* MemorizeApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 240EDC3E2998A3B900A46AC9 /* MemorizeApp.swift */; };
-		240EDC412998A3B900A46AC9 /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 240EDC402998A3B900A46AC9 /* ContentView.swift */; };
+		240EDC412998A3B900A46AC9 /* EmojiMemoryGameView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 240EDC402998A3B900A46AC9 /* EmojiMemoryGameView.swift */; };
 		240EDC432998A3BA00A46AC9 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 240EDC422998A3BA00A46AC9 /* Assets.xcassets */; };
 		240EDC462998A3BA00A46AC9 /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 240EDC452998A3BA00A46AC9 /* Preview Assets.xcassets */; };
 		245099F32998EAD6000CE9DA /* MemoryGame.swift in Sources */ = {isa = PBXBuildFile; fileRef = 245099F22998EAD6000CE9DA /* MemoryGame.swift */; };
 		245099F52998EC71000CE9DA /* EmojiMemoryGame.swift in Sources */ = {isa = PBXBuildFile; fileRef = 245099F42998EC71000CE9DA /* EmojiMemoryGame.swift */; };
+		24E748FC29993782009B5FE8 /* Constans.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24E748FB29993781009B5FE8 /* Constans.swift */; };
+		24E748FE299944F4009B5FE8 /* AspectVGrid.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24E748FD299944F4009B5FE8 /* AspectVGrid.swift */; };
+		24FE51AF299CED6F00798617 /* Pie.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24FE51AE299CED6F00798617 /* Pie.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
+		240EBF08299CFCE900429C8A /* Cardify.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Cardify.swift; sourceTree = "<group>"; };
 		240EDC3B2998A3B900A46AC9 /* Memorize.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Memorize.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		240EDC3E2998A3B900A46AC9 /* MemorizeApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MemorizeApp.swift; sourceTree = "<group>"; };
-		240EDC402998A3B900A46AC9 /* ContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = "<group>"; };
+		240EDC402998A3B900A46AC9 /* EmojiMemoryGameView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EmojiMemoryGameView.swift; sourceTree = "<group>"; };
 		240EDC422998A3BA00A46AC9 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		240EDC452998A3BA00A46AC9 /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = "<group>"; };
 		245099F22998EAD6000CE9DA /* MemoryGame.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MemoryGame.swift; sourceTree = "<group>"; };
 		245099F42998EC71000CE9DA /* EmojiMemoryGame.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EmojiMemoryGame.swift; sourceTree = "<group>"; };
+		24E748FB29993781009B5FE8 /* Constans.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Constans.swift; sourceTree = "<group>"; };
+		24E748FD299944F4009B5FE8 /* AspectVGrid.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AspectVGrid.swift; sourceTree = "<group>"; };
+		24FE51AE299CED6F00798617 /* Pie.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Pie.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -56,7 +64,11 @@
 			isa = PBXGroup;
 			children = (
 				240EDC3E2998A3B900A46AC9 /* MemorizeApp.swift */,
-				240EDC402998A3B900A46AC9 /* ContentView.swift */,
+				240EDC402998A3B900A46AC9 /* EmojiMemoryGameView.swift */,
+				24FE51AE299CED6F00798617 /* Pie.swift */,
+				24E748FD299944F4009B5FE8 /* AspectVGrid.swift */,
+				24E748FB29993781009B5FE8 /* Constans.swift */,
+				240EBF08299CFCE900429C8A /* Cardify.swift */,
 				245099F22998EAD6000CE9DA /* MemoryGame.swift */,
 				245099F42998EC71000CE9DA /* EmojiMemoryGame.swift */,
 				240EDC422998A3BA00A46AC9 /* Assets.xcassets */,
@@ -144,7 +156,11 @@
 			buildActionMask = 2147483647;
 			files = (
 				245099F32998EAD6000CE9DA /* MemoryGame.swift in Sources */,
-				240EDC412998A3B900A46AC9 /* ContentView.swift in Sources */,
+				240EDC412998A3B900A46AC9 /* EmojiMemoryGameView.swift in Sources */,
+				240EBF09299CFCE900429C8A /* Cardify.swift in Sources */,
+				24E748FE299944F4009B5FE8 /* AspectVGrid.swift in Sources */,
+				24E748FC29993782009B5FE8 /* Constans.swift in Sources */,
+				24FE51AF299CED6F00798617 /* Pie.swift in Sources */,
 				240EDC3F2998A3B900A46AC9 /* MemorizeApp.swift in Sources */,
 				245099F52998EC71000CE9DA /* EmojiMemoryGame.swift in Sources */,
 			);

Memorize/AspectVGrid.swift

@@ -0,0 +1,66 @@
+//
+//  AspectVGrid.swift
+//  Memorize
+//
+//  Created by ching on 2023/2/13.
+//
+
+import SwiftUI
+
+struct AspectVGrid<Item, ItemView>: View where ItemView: View, Item: Identifiable {
+    var items: [Item]
+    var aspectRatio: CGFloat
+    var content: (Item) -> ItemView
+    
+    init(items: [Item], aspectRatio: CGFloat, @ViewBuilder content: @escaping (Item) -> ItemView) {
+        self.items = items
+        self.aspectRatio = aspectRatio
+        self.content = content
+    }
+    
+    var body: some View {
+        GeometryReader { geometry in
+            VStack{
+                let width: CGFloat = widthThatFits(itemCount: items.count, in:  geometry.size, itemAspectRatio: aspectRatio)
+                LazyVGrid(columns: [adaptiveGridItem(width: width)], spacing: 0) {
+                    ForEach(items) {
+                        item in content(item).aspectRatio(aspectRatio, contentMode: .fit)
+                    }
+                }
+                Spacer(minLength: 0)
+            }
+        }
+    }
+    
+    private func adaptiveGridItem(width: CGFloat) -> GridItem {
+        var gridItem = GridItem(.adaptive(minimum: width))
+        gridItem.spacing = 0
+        return gridItem
+    }
+
+    private func widthThatFits(itemCount: Int, in size: CGSize, itemAspectRatio: CGFloat) -> CGFloat {
+        var columCount = 1
+        var rowCount = itemCount
+
+        repeat {
+            let itemWidth = size.width / CGFloat(columCount)
+            let itemHeight = itemWidth / itemAspectRatio
+            if CGFloat(rowCount) * itemHeight < size.height {
+                break
+            }
+            columCount += 1
+            rowCount = (itemCount + columCount - 1) / columCount
+        } while columCount < itemCount
+        
+        if columCount > itemCount {
+            columCount = itemCount
+        }
+        return floor(size.width / CGFloat(columCount))
+    }
+}
+
+// struct AspectVGrid_Previews: PreviewProvider {
+//    static var previews: some View {
+//        AspectVGrid()
+//    }
+// }

Memorize/Cardify.swift

@@ -0,0 +1,41 @@
+//
+//  Cardify.swift
+//  Memorize
+//
+//  Created by ching on 2023/2/15.
+//
+
+import SwiftUI
+
+struct Cardify: AnimatableModifier {
+    init(isFaceUp: Bool) {
+        self.rotation = isFaceUp ? 0 : 180
+    }
+
+    var animatableData: Double {
+        get { rotation }
+        set { rotation = newValue }
+    }
+
+    var rotation: Double
+    func body(content: Content) -> some View {
+        ZStack {
+            let shape = RoundedRectangle(cornerRadius: const.DrawingConstants.cornerRadius)
+            if rotation < 90 {
+                shape.fill().foregroundColor(.white)
+                shape.strokeBorder(lineWidth: const.DrawingConstants.lineWidth)
+            } else {
+                shape.fill()
+            }
+            content
+                .opacity(rotation < 90 ? 1 : 0)
+        }
+        .rotation3DEffect(Angle.degrees(rotation), axis: (x: 0, y: 1, z: 0))
+    }
+}
+
+extension View {
+    func cadify(isFaceUp: Bool) -> some View {
+        modifier(Cardify(isFaceUp: isFaceUp))
+    }
+}

Memorize/Constans.swift

@@ -0,0 +1,30 @@
+//
+//  Constans.swift
+//  Memorize
+//
+//  Created by ching on 2023/2/12.
+//
+
+import Foundation
+import SwiftUI
+
+struct const {
+    enum DrawingConstants {
+        static let cardColor = Color.red
+        static let cornerRadius: CGFloat = 10
+        static let lineWidth: CGFloat = 3
+        static let fontScale: CGFloat = 0.6
+        static let fontSize: CGFloat = 32
+        static let gridWidth: CGFloat = 80
+        static let gridAspectRatio: CGFloat = 2 / 3
+        static let matchedCardOpacity: Double = 0
+        static let gridPadding: CGFloat = 4
+        static let piePadding: CGFloat = 4
+        static let pieOpacity: CGFloat = 0.5
+        static let undealtHeight: CGFloat = 90
+        static let undealtWidth: CGFloat = undealtHeight * gridAspectRatio
+        static let dealDuration: Double = 1
+        static let totalDealDuration: Double = 1.5
+        static let bonusTimeLimit: TimeInterval = 6
+    }
+}

Memorize/ContentView.swift

@@ -1,54 +0,0 @@
-//
-//  ContentView.swift
-//  Memorize
-//
-//  Created by ching on 2023/2/12.
-//
-
-import SwiftUI
-
-struct ContentView: View {
-    @ObservedObject var viewModel: EmojiMemoryGame
-    var body: some View {
-        ScrollView {
-            LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) {
-                ForEach(viewModel.cards) {
-                    card in CardView(card: card).aspectRatio(2 / 3, contentMode: .fit)
-                        .onTapGesture {
-                            viewModel.choose(card)
-                        }
-                }
-            }
-        }
-        .foregroundColor(/*@START_MENU_TOKEN@*/ .red/*@END_MENU_TOKEN@*/)
-        .padding(.horizontal)
-    }
-}
-
-struct CardView: View {
-    let card: MemoryGame<String>.Card
-    var body: some View {
-        ZStack {
-            let shape = RoundedRectangle(cornerRadius: 20.0)
-            if card.isFaceUp {
-                shape.fill().foregroundColor(.white)
-                shape.strokeBorder(lineWidth: 3)
-                Text(card.content).font(.largeTitle)
-            } else if card.isMatched {
-                shape.opacity(0)
-            } else {
-                shape.fill()
-            }
-        }
-    }
-}
-
-struct ContentView_Previews: PreviewProvider {
-    static var previews: some View {
-        let game = EmojiMemoryGame()
-        ContentView(viewModel: game)
-            .preferredColorScheme(.dark)
-        ContentView(viewModel: game)
-            .preferredColorScheme(.light)
-    }
-}

Memorize/EmojiMemoryGame.swift

@@ -8,22 +8,31 @@
 import SwiftUI
 
 // viewmodel
-class EmojiMemoryGame: ObservableObject{
+class EmojiMemoryGame: ObservableObject {
+    typealias Card = MemoryGame<String>.Card
     static let emojis = ["🚌", "🚙", "🚗", "🚕", "🏎", "🚎", "🚓"]
 
     static func createMemoryGame() -> MemoryGame<String> {
-        MemoryGame<String>(numberOfPairsOfCards: 5) { pairIndex in EmojiMemoryGame.emojis[pairIndex] }
+        MemoryGame<String>(numberOfPairsOfCards: emojis.count) { pairIndex in EmojiMemoryGame.emojis[pairIndex] }
     }
 
-    @Published private var model: MemoryGame<String> = createMemoryGame()
+    @Published private var model = createMemoryGame()
 
-    var cards: [MemoryGame<String>.Card] {
+    var cards: [Card] {
         return model.cards
     }
 
     // MARK: - Intent(s)
 
-    func choose(_ card: MemoryGame<String>.Card) {
+    func choose(_ card: Card) {
         model.choose(card)
     }
+
+    func shuffle() {
+        model.shuffle()
+    }
+
+    func restart() {
+        model = EmojiMemoryGame.createMemoryGame()
+    }
 }

Memorize/EmojiMemoryGameView.swift

@@ -0,0 +1,164 @@
+//
+//  EmojiMemoryGameView.swift
+//  Memorize
+//
+//  Created by ching on 2023/2/12.
+//
+
+import SwiftUI
+
+struct EmojiMemoryGameView: View {
+    @ObservedObject var game: EmojiMemoryGame
+    @Namespace private var dealingNamespace
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            VStack {
+                gameBody
+                HStack {
+                    restart
+                    Spacer()
+                    shuffle
+                }
+                .padding(.horizontal)
+            }
+            .padding()
+            deckBody
+        }
+    }
+
+    @State private var dealt = Set<Int>()
+
+    private func deal(_ card: EmojiMemoryGame.Card) {
+        dealt.insert(card.id)
+    }
+
+    private func isUndealt(_ card: EmojiMemoryGame.Card) -> Bool {
+        !dealt.contains(card.id)
+    }
+
+    private func dealAnimation(for card: EmojiMemoryGame.Card) -> Animation {
+        var delay = 0.0
+        if let index = game.cards.firstIndex(where: { $0.id == card.id }) {
+            delay = Double(index) * (const.DrawingConstants.totalDealDuration / Double(game.cards.count))
+        }
+
+        return Animation.easeInOut(duration: const.DrawingConstants.dealDuration).delay(delay)
+    }
+
+    private func zIndex(of card: EmojiMemoryGame.Card) -> Double {
+        -Double(game.cards.firstIndex(where: { $0.id == card.id }) ?? 0)
+    }
+
+    var gameBody: some View {
+        AspectVGrid(items: game.cards, aspectRatio: const.DrawingConstants.gridAspectRatio) {
+            card in
+            if isUndealt(card) || (card.isMatched && !card.isFaceUp) {
+                Color.clear
+            } else {
+                CardView(card: card)
+                    .matchedGeometryEffect(id: card.id, in: dealingNamespace)
+                    .padding(const.DrawingConstants.gridPadding)
+                    .zIndex(zIndex(of: card))
+                    .transition(AnyTransition.asymmetric(insertion: .identity, removal: .scale))
+                    .onTapGesture {
+                        withAnimation {
+                            game.choose(card)
+                        }
+                    }
+            }
+        }
+        .foregroundColor(const.DrawingConstants.cardColor)
+    }
+
+    var deckBody: some View {
+        ZStack {
+            ForEach(game.cards.filter(isUndealt)) {
+                card in CardView(card: card)
+                    .matchedGeometryEffect(id: card.id, in: dealingNamespace)
+                    .transition(AnyTransition.asymmetric(insertion: .opacity, removal: .identity))
+                    .zIndex(zIndex(of: card))
+            }
+        }
+        .frame(width: const.DrawingConstants.undealtWidth, height: const.DrawingConstants.undealtHeight)
+        .foregroundColor(const.DrawingConstants.cardColor)
+        .onTapGesture {
+            for card in game.cards {
+                withAnimation(dealAnimation(for: card)) {
+                    deal(card)
+                }
+            }
+        }
+    }
+
+    var shuffle: some View {
+        Button("Shuffle") {
+            withAnimation {
+                game.shuffle()
+            }
+        }
+    }
+
+    var restart: some View {
+        Button("Restart") {
+            withAnimation {
+                dealt = []
+                game.restart()
+            }
+        }
+    }
+}
+
+struct CardView: View {
+    let card: EmojiMemoryGame.Card
+
+    @State private var animatedBonusRemaining: Double = 0
+
+    var body: some View {
+        GeometryReader { geometry in
+            ZStack {
+                Group {
+                    if card.isConsumingBonusTime {
+                        Pie(startAngle: Angle(degrees: 270),
+                            endAngle: Angle(degrees: (1 - animatedBonusRemaining) * 360 - 90))
+                            .onAppear {
+                                animatedBonusRemaining = card.bonusRemaining
+                                withAnimation(.linear(duration: card.bonusTimeRemaining)) {
+                                    animatedBonusRemaining = 0
+                                }
+                            }
+                    } else {
+                        Pie(startAngle: Angle(degrees: 0 - 90),
+                            endAngle: Angle(degrees: (1 - card.bonusRemaining) * 360 - 90))
+                    }
+                }
+                .padding(const.DrawingConstants.piePadding)
+                .opacity(const.DrawingConstants.pieOpacity)
+                Text(card.content)
+                    .rotationEffect(Angle.degrees(card.isMatched ? 360 : 0))
+                    .animation(Animation.easeInOut)
+                    .font(Font.system(size: const.DrawingConstants.fontSize))
+                    .scaleEffect(scale(thatFits: geometry.size))
+            }.cadify(isFaceUp: card.isFaceUp)
+        }
+    }
+
+    private func scale(thatFits size: CGSize) -> CGFloat {
+        min(size.width, size.height) / const.DrawingConstants.fontSize * const.DrawingConstants.fontScale
+    }
+
+    private func font(in size: CGSize) -> Font {
+        Font.system(size: min(size.width, size.height) * const.DrawingConstants.fontScale)
+    }
+}
+
+struct ContentView_Previews: PreviewProvider {
+    static var previews: some View {
+        let game = EmojiMemoryGame()
+        game.choose(game.cards.first!)
+        return EmojiMemoryGameView(game: game)
+//            .preferredColorScheme(.dark)
+//        EmojiMemoryGameView(game: game)
+            .preferredColorScheme(.light)
+    }
+}

Memorize/MemorizeApp.swift

@@ -12,7 +12,7 @@ struct MemorizeApp: App {
     let game = EmojiMemoryGame()
     var body: some Scene {
         WindowGroup {
-            ContentView(viewModel: game)
+            EmojiMemoryGameView(game: game)
         }
     }
 }

Memorize/MemoryGame.swift

@@ -10,7 +10,10 @@ import Foundation
 // model
 struct MemoryGame<CardContent> where CardContent: Equatable {
     private(set) var cards: [Card]
-    private var indexOfTheOneAndOnlyFaceUpCard: Int?
+    private var indexOfTheOneAndOnlyFaceUpCard: Int? {
+        get { cards.indices.filter { cards[$0].isFaceUp }.oneAndOnly }
+        set { cards.indices.forEach { cards[$0].isFaceUp = ($0 == newValue) } }
+    }
 
     mutating func choose(_ card: Card) {
         if let chosenIndex = cards.firstIndex(where: { $0.id == card.id }), !cards[chosenIndex].isFaceUp, !cards[chosenIndex].isMatched {
@@ -19,19 +22,17 @@ struct MemoryGame<CardContent> where CardContent: Equatable {
                     cards[chosenIndex].isMatched = true
                     cards[potentialMatchIndex].isMatched = true
                 }
-                indexOfTheOneAndOnlyFaceUpCard = nil
+                cards[chosenIndex].isFaceUp.toggle()
             } else {
-                for index in cards.indices {
-                    if cards[index].isFaceUp {
-                        cards[index].isFaceUp.toggle()
-                    }
-                }
                 indexOfTheOneAndOnlyFaceUpCard = chosenIndex
             }
-            cards[chosenIndex].isFaceUp.toggle()
         }
     }
 
+    mutating func shuffle() {
+        cards.shuffle()
+    }
+
     func index(of card: Card) -> Int? {
         for index in 0 ..< cards.count {
             if cards[index].id == card.id {
@@ -42,19 +43,83 @@ struct MemoryGame<CardContent> where CardContent: Equatable {
     }
 
     init(numberOfPairsOfCards: Int, createCardContent: (Int) -> CardContent) {
-        cards = [Card]()
+        cards = []
-        //
+
         for pairIndex in 0 ..< numberOfPairsOfCards {
             let content: CardContent = createCardContent(pairIndex)
             cards.append(Card(content: content, id: pairIndex * 2))
             cards.append(Card(content: content, id: pairIndex * 2 + 1))
         }
+        cards.shuffle()
     }
 
     struct Card: Identifiable {
-        var isFaceUp: Bool = false
+        var isFaceUp = false {
-        var isMatched: Bool = false
+            didSet {
-        var content: CardContent
+                if isFaceUp {
-        var id: Int
+                    startUsingBonusTime()
+                } else {
+                    stopUsingBonusTime()
+                }
+            }
+        }
+
+        var isMatched = false {
+            didSet {
+                stopUsingBonusTime()
+            }
+        }
+
+        let content: CardContent
+        let id: Int
+
+        var bonusTimeLimit = const.DrawingConstants.bonusTimeLimit
+
+        private var faceUpTime: TimeInterval {
+            if let lastFaceUpDate = lastFaceUpDate {
+                return pastFaceUpTime + Date().timeIntervalSince(lastFaceUpDate)
+            } else {
+                return pastFaceUpTime
+            }
+        }
+
+        var lastFaceUpDate: Date?
+        var pastFaceUpTime: TimeInterval = 0
+        var bonusTimeRemaining: TimeInterval {
+            max(0, bonusTimeLimit - faceUpTime)
+        }
+
+        var bonusRemaining: Double {
+            (bonusTimeLimit > 0 && bonusTimeRemaining > 0) ? bonusTimeRemaining / bonusTimeLimit : 0
+        }
+
+        var hasEarnedBonus: Bool {
+            isMatched && bonusTimeRemaining > 0
+        }
+
+        var isConsumingBonusTime: Bool {
+            isFaceUp && !isMatched && bonusTimeRemaining > 0
+        }
+
+        private mutating func startUsingBonusTime() {
+            if isConsumingBonusTime, lastFaceUpDate == nil {
+                lastFaceUpDate = Date()
+            }
+        }
+
+        private mutating func stopUsingBonusTime() {
+            pastFaceUpTime = faceUpTime
+            lastFaceUpDate = nil
+        }
+    }
+}
+
+extension Array {
+    var oneAndOnly: Element? {
+        if count == 1 {
+            return first
+        } else {
+            return nil
+        }
     }
 }

Memorize/Pie.swift

@@ -0,0 +1,47 @@
+//
+//  Pie.swift
+//  Memorize
+//
+//  Created by ching on 2023/2/15.
+//
+
+import SwiftUI
+
+struct Pie: Shape {
+    var startAngle: Angle
+    var endAngle: Angle
+    var clockwise = false
+
+    var animatableData: AnimatablePair<Double, Double> {
+        get {
+            AnimatablePair(startAngle.radians, endAngle.radians)
+        }
+        set {
+            startAngle = Angle.radians(newValue.first)
+            endAngle = Angle.radians(newValue.second)
+        }
+    }
+
+    func path(in rect: CGRect) -> Path {
+        let center = CGPoint(x: rect.midX, y: rect.midY)
+        let radius = min(rect.height, rect.width) / 2
+        let start = CGPoint(
+            x: center.x + radius * CGFloat(cos(startAngle.radians)),
+            y: center.y + radius * CGFloat(sin(startAngle.radians))
+        )
+
+        var p = Path()
+        p.move(to: center)
+        p.addLine(to: start)
+        p.addArc(
+            center: center,
+            radius: radius,
+            startAngle: startAngle,
+            endAngle: endAngle,
+            clockwise: !clockwise
+        )
+        p.addLine(to: center)
+
+        return p
+    }
+}