Develop (#103)

- add navigation zoom transition - update navigation title animation
erolburak · Sep 18, 2024 · a2e6aef · a2e6aef
1 parent 68d6cce
commit a2e6aef
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 21 deletions.
diff --git a/BobbysNews/Presentation/ContentView.swift b/BobbysNews/Presentation/ContentView.swift
@@ -13,6 +13,7 @@ struct ContentView: View {
     // MARK: - Private Properties
 
     @AppStorage("country") private var country = ""
+    @Namespace private var animation
 
     // MARK: - Properties
 
@@ -24,15 +25,18 @@ struct ContentView: View {
         NavigationStack {
             ScrollView {
                 ForEach($viewModel.articles) { $article in
-                    NavigationLink(value: $article.wrappedValue) {
+                    NavigationLink {
+                        DetailView(viewModel: ViewModelFactory.shared.detailViewModel(article: article))
+                            .navigationTransition(.zoom(sourceID: article.id,
+                                                        in: animation))
+                    } label: {
                         ListItem(article: $article,
                                  translationSessionConfiguration: viewModel.translationSessionConfiguration)
                     }
+                    .matchedTransitionSource(id: article.id,
+                                             in: animation)
                     .accessibilityIdentifier(article.id == viewModel.articles.first?.id ? "NavigationLink" : "")
                 }
-                .navigationDestination(for: Article.self) { article in
-                    DetailView(viewModel: ViewModelFactory.shared.detailViewModel(article: article))
-                }
             }
             .navigationTitle("TopHeadlines")
             .toolbarTitleDisplayMode(.inline)

diff --git a/BobbysNews/Presentation/DetailView.swift b/BobbysNews/Presentation/DetailView.swift
@@ -19,23 +19,23 @@ struct DetailView: View {
     var body: some View {
         ScrollView {
             VStack(alignment: .leading) {
-                Text(viewModel.title)
-                    .font(.system(.subheadline,
-                                  weight: .black))
-                    .lineLimit(1)
-                    .frame(maxWidth: .infinity,
-                           alignment: .center)
-                    .onGeometryChange(for: CGFloat.self) { geometryProxy in
-                        geometryProxy.frame(in: .scrollView(axis: .vertical)).minY
-                    } action: { newValue in
-                        viewModel.titleScrollOffset = newValue
-                    }
+                Group {
+                    Text(viewModel.title)
+                        .font(.system(.subheadline,
+                                      weight: .black))
+                        .lineLimit(1)
+                        .onGeometryChange(for: CGFloat.self) { geometryProxy in
+                            geometryProxy.frame(in: .scrollView(axis: .vertical)).minY
+                        } action: { newValue in
+                            viewModel.titleScrollOffset = newValue
+                        }
 
-                Text(viewModel.article.publishedAt?.toRelative ?? String(localized: "EmptyArticlePublishedAt"))
-                    .font(.system(size: 8,
-                                  weight: .semibold))
-                    .frame(maxWidth: .infinity,
-                           alignment: .center)
+                    Text(viewModel.article.publishedAt?.toRelative ?? String(localized: "EmptyArticlePublishedAt"))
+                        .font(.system(size: 8,
+                                      weight: .semibold))
+                }
+                .frame(maxWidth: .infinity,
+                       alignment: .center)
 
                 Group {
                     if let urlToImage = viewModel.article.urlToImage {
@@ -117,13 +117,16 @@ struct DetailView: View {
             ToolbarItem(placement: .principal) {
                 VStack {
                     Text(viewModel.title)
-                        .font(.headline)
+                        .font(.system(.subheadline,
+                                      weight: .black))
+                        .lineLimit(1)
 
                     Text(viewModel.article.publishedAt?.toRelative ?? String(localized: "EmptyArticlePublishedAt"))
                         .font(.system(size: 8,
                                       weight: .semibold))
                 }
                 .offset(y: viewModel.navigationTitleScrollOffset)
+                .opacity(viewModel.navigationTitleOpacity)
                 .onGeometryChange(for: CGFloat.self) { geometryProxy in
                     geometryProxy.size.height + 8
                 } action: { newValue in

diff --git a/BobbysNews/Presentation/DetailViewModel.swift b/BobbysNews/Presentation/DetailViewModel.swift
@@ -22,6 +22,14 @@ final class DetailViewModel {
     }
 
     var navigationTitleOffset: CGFloat?
+    var navigationTitleOpacity: Double {
+        guard let titleScrollOffset
+        else {
+            return .zero
+        }
+        return titleScrollOffset > .zero ? .zero : 1
+    }
+
     var navigationTitleScrollOffset: CGFloat {
         guard let navigationTitleOffset,
               let titleScrollOffset