AboutView Animation Improvements (#1915)

Author: Kihron

CodeEdit/Features/About/Acknowledgements/Views/AcknowledgementsView.swift

@@ -14,7 +14,7 @@ struct AcknowledgementsView: View {
 
     var body: some View {
         AboutDetailView(title: "Acknowledgements", aboutMode: $aboutMode, namespace: namespace) {
-            VStack(spacing: 0) {
+            LazyVStack(spacing: 0) {
                 ForEach(
                     model.indexedAcknowledgements,
                     id: \.acknowledgement.name

CodeEdit/Features/About/Contributors/ContributorsView.swift

@@ -14,7 +14,7 @@ struct ContributorsView: View {
 
     var body: some View {
         AboutDetailView(title: "Contributors", aboutMode: $aboutMode, namespace: namespace) {
-            VStack(spacing: 0) {
+            LazyVStack(spacing: 0) {
                 ForEach(model.contributors) { contributor in
                     ContributorRowView(contributor: contributor)
                     Divider()

CodeEdit/Features/About/Views/AboutDefaultView.swift

@@ -44,6 +44,7 @@ struct AboutDefaultView: View {
             VStack(spacing: 0) {
                 Text("CodeEdit")
                     .matchedGeometryEffect(id: "Title", in: namespace, properties: .position, anchor: .center)
+                    .blur(radius: aboutMode == .about ? 0 : 10)
                     .foregroundColor(.primary)
                     .font(.system(
                         size: 26,
@@ -61,6 +62,8 @@ struct AboutDefaultView: View {
                         properties: .position,
                         anchor: UnitPoint(x: 0.5, y: -0.75)
                     )
+                    .blur(radius: aboutMode == .about ? 0 : 10)
+                    .opacity(aboutMode == .about ? 1 : 0)
             }
             .padding(.horizontal)
         }
@@ -106,6 +109,8 @@ struct AboutDefaultView: View {
             }
             .matchedGeometryEffect(id: "Titlebar", in: namespace, properties: .position, anchor: .top)
             .matchedGeometryEffect(id: "ScrollView", in: namespace, properties: .position, anchor: .top)
+            .blur(radius: aboutMode == .about ? 0 : 10)
+            .opacity(aboutMode == .about ? 1 : 0)
         }
         .padding(.horizontal)
     }

CodeEdit/Features/About/Views/AboutDetailView.swift

@@ -46,6 +46,8 @@ struct AboutDetailView<Content: View>: View {
             }
             .frame(maxWidth: .infinity)
             .matchedGeometryEffect(id: "ScrollView", in: namespace, properties: .position, anchor: .top)
+            .blur(radius: aboutMode != .about ? 0 : 10)
+            .opacity(aboutMode != .about ? 1 : 0)
             .clipShape(Rectangle())
         }
 
@@ -113,6 +115,8 @@ struct AboutDetailView<Content: View>: View {
                     }
                     .contentShape(Rectangle())
                     .matchedGeometryEffect(id: "Title", in: namespace, properties: .position, anchor: .center)
+                    .blur(radius: aboutMode != .about ? 0 : 10)
+                    .opacity(aboutMode != .about ? 1 : 0)
             }
             .buttonStyle(.plain)
 
@@ -135,9 +139,17 @@ struct AboutDetailView<Content: View>: View {
         minOffset: CGFloat,
         maxOffset: CGFloat
     ) -> CGFloat {
+        let currentOffset = scrollOffset
+        let threshold: CGFloat = 1.0
+
+        /// Prevents unnecessary view updates if the scroll offset is below the threshold
+        if abs(currentOffset) < threshold {
+            return minValue
+        }
+
         let valueRange = maxValue - minValue
         let offsetRange = maxOffset - minOffset
-        let currentOffset = scrollOffset
+
         let percentage = (currentOffset - minOffset) / offsetRange
         let value = minValue + (valueRange * percentage)
 

CodeEdit/Features/About/Views/AboutView.swift

@@ -36,7 +36,7 @@ public struct AboutView: View {
                 ContributorsView(aboutMode: $aboutMode, namespace: animator)
             }
         }
-        .animation(.spring(), value: aboutMode)
+        .animation(.smooth, value: aboutMode)
         .ignoresSafeArea()
         .frame(width: 280, height: 400 - 28)
         .fixedSize()