Merge pull request #65 from mash-up-kr/feature/#63-memeListView-hyerjang

Fix: 검색결과와 마이페이지 밈 리스트뷰 디자인 수정 및 탭바 수정
mash-up-kr · Aug 11, 2024 · 255e844 · 255e844
2 parents 52551dd + abfee50
commit 255e844
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 23 deletions.
diff --git a/Projects/App/Sources/AppDelegate.swift b/Projects/App/Sources/AppDelegate.swift
@@ -9,7 +9,6 @@
 import UIKit
 import SwiftUI
 import Home
-import MemeDetail
 import PPACUtil
 
 @main

diff --git a/Projects/Core/DesignSystem/Sources/MainTab/MainTab.swift b/Projects/Core/DesignSystem/Sources/MainTab/MainTab.swift
@@ -6,7 +6,9 @@
 //
 
 import SwiftUI
+
 import ResourceKit
+import Lottie
 
 public enum MainTab: String, CaseIterable, Identifiable {
   case recommend
@@ -37,6 +39,17 @@ public enum MainTab: String, CaseIterable, Identifiable {
     }
   }
 
+  public var lottieAnimation: LottieAnimation? {
+    switch self {
+    case .recommend:
+      AnimationAsset.tabRecommand.animation
+    case .search:
+      AnimationAsset.tabSearch.animation
+    case .mypage:
+      AnimationAsset.tabMy.animation
+    }
+  }
+
   public var title: String {
     switch self {
     case .recommend:

diff --git a/Projects/Core/DesignSystem/Sources/MainTab/MainTabView.swift b/Projects/Core/DesignSystem/Sources/MainTab/MainTabView.swift
@@ -6,7 +6,9 @@
 //
 
 import SwiftUI
+
 import ResourceKit
+import Lottie
 
 public struct CustomTabBarView: View {
   @Binding public var selectedTab: MainTab
@@ -23,7 +25,7 @@ public struct CustomTabBarView: View {
       }
       Spacer(minLength: 20)
     }
-    .frame(maxWidth: .infinity, maxHeight: 98)
+    .frame(maxWidth: .infinity, maxHeight: 88)
     .background(.white)
     .clipShape(
       .rect(
@@ -37,30 +39,53 @@ public struct CustomTabBarView: View {
 
 
 public struct TabItemView: View {
-
   let tab: MainTab
   let isSelected: Bool
-
-  var tabImage: Image {
-    return isSelected ? tab.selectedImage : tab.image
-  }
+  @State var playbackMode: LottiePlaybackMode = .paused(at: .progress(100))
+  @State var isAnimationFinished: Bool = false
 
   var color: SwiftUI.Color {
     return isSelected ? Color.Text.brand : Color.Text.assistive
   }
 
   public var body: some View {
     VStack {
-      tabImage
+      tabItemImageView
         .frame(width: 24, height: 24)
-        .padding(.bottom, 2)
-
+        .padding(.bottom, 6)
       Text(tab.title)
-        .font(Font.Weight.semiBold)
+        .font(Font.Weight.medium)
     }
     .foregroundStyle(color)
     .padding(40)
   }
+
+  var needPlayLottieView: Bool {
+    return !isAnimationFinished && isSelected
+  }
+
+  var tabItemImageView: some View {
+    needPlayLottieView ? tabLottieView : tabImageView
+  }
+
+  var tabLottieView: AnyView {
+    AnyView(
+     LottieView(animation: tab.lottieAnimation)
+       .playing()
+       .animationDidFinish { _ in
+         isAnimationFinished = true
+       }
+       .resizable()
+   )
+  }
+
+  var tabImageView: AnyView {
+    AnyView(
+      (isSelected ? tab.selectedImage : tab.image)
+        .resizable()
+    )
+  }
+
 }
 
 struct TabBarModifier: ViewModifier {

diff --git a/Projects/Core/DesignSystem/Sources/View/Meme/MemeItemView.swift b/Projects/Core/DesignSystem/Sources/View/Meme/MemeItemView.swift
@@ -26,14 +26,13 @@ public struct MemeItemView: View {
   }
 
   public var body: some View {
-    VStack {
+    VStack(spacing: 10) {
       MemeItemViewWithButton(memeDetail: memeDetail, memeCopyHandler: memeCopyHandler)
         .onTapGesture {
           memeClickHandler?(memeDetail)
         }
       MemeItemInfoView(memeName: memeDetail.title, reaction: memeDetail.reaction)
     }
-    .padding(.bottom, 20)
   }
 }
 
@@ -117,13 +116,13 @@ struct MemeItemInfoView: View {
         }
 
       }
-      .padding(.bottom, 4)
       Spacer()
     }
+    .padding(.horizontal, 4)
   }
 
   var memeReactionView: some View {
-    HStack {
+    HStack(spacing: 4) {
       Text("ㅋㅋ")
         .font(Font.Family2.xlarge)
       Text("\(reaction)")

diff --git a/Projects/Core/DesignSystem/Sources/View/Meme/MemeListView.swift b/Projects/Core/DesignSystem/Sources/View/Meme/MemeListView.swift
@@ -45,7 +45,7 @@ public struct MemeListView: View {
   public var body: some View {
     ScrollView {
       HStack(alignment: .top) {
-        LazyVStack {
+        LazyVStack(spacing: 20) {
           ForEach(oddIndexedItems) { memeDetail in
             MemeItemView(
               memeDetail: memeDetail,
@@ -60,7 +60,7 @@ public struct MemeListView: View {
           }
         }
 
-        LazyVStack {
+        LazyVStack(spacing: 20) {
           ForEach(evenIndexedItems) { memeDetail in
             MemeItemView(
               memeDetail: memeDetail,

diff --git a/Projects/Features/MyPage/Sources/MyPageView.swift b/Projects/Features/MyPage/Sources/MyPageView.swift
@@ -6,10 +6,13 @@
 //
 
 import SwiftUI
+
 import DesignSystem
 import ResourceKit
 import PPACModels
 
+import PopupView
+
 public struct MyPageView: View {
   @ObservedObject private var viewModel: MyPageViewModel
 
@@ -41,7 +44,7 @@ public struct MyPageView: View {
             viewModel.dispatch(type: .onAppearLastMeme)
           }
         )
-        Spacer(minLength: 80)
+        Spacer(minLength: 100)
       }
       .onAppear {
         viewModel.dispatch(type: .onAppearMyPageView)
@@ -52,6 +55,11 @@ public struct MyPageView: View {
       .padding(.top, 51)
       .edgesIgnoringSafeArea(.all)
     }
+    .popup(
+      isActive: $viewModel.state.isActiveCopyPopup,
+      image: ResourceKitAsset.Icon.copyFilled.swiftUIImage,
+      text: "이미지를 클립보드에 복사했어요"
+    )
   }
 
   var blurView: some View {

diff --git a/Projects/Features/MyPage/Sources/MyPageViewModel.swift b/Projects/Features/MyPage/Sources/MyPageViewModel.swift
@@ -32,7 +32,8 @@ final public class MyPageViewModel: ViewModelType, ObservableObject {
     var lastSeenMemeList: [MemeDetail]
     var savedMemeList: [MemeDetail]
     var savedMemePagination: MemeListWithPagination.Pagination
-    var isRefreshCompleted: Bool
+    var isRefreshCompleted: Bool = true
+    var isActiveCopyPopup: Bool = false
 
     var memeLevel: MemeLevelType {
       return MemeLevelType(rawValue: userDetail.level) ?? .level1
@@ -82,8 +83,7 @@ final public class MyPageViewModel: ViewModelType, ObservableObject {
     self.state = State(userDetail: userDetail,
                        lastSeenMemeList: [],
                        savedMemeList: [],
-                       savedMemePagination: .none,
-                       isRefreshCompleted: true)
+                       savedMemePagination: .none)
     self.userDetail = userDetail
     self.getUserDetailUseCase = getUserDetailUseCase
     self.getLastSeenMemeUseCase = getLastSeenMemeUseCase
@@ -121,8 +121,7 @@ final public class MyPageViewModel: ViewModelType, ObservableObject {
       self.state = State(userDetail: userDetail,
                          lastSeenMemeList: lastSeenMemeList,
                          savedMemeList: savedMemeListWithPagination.memeList,
-                         savedMemePagination: savedMemeListWithPagination.pagination,
-                         isRefreshCompleted: true)
+                         savedMemePagination: savedMemeListWithPagination.pagination)
     } catch(let error) {
       print("fetchUserMemes error = \(error)")
     }
@@ -156,6 +155,7 @@ final public class MyPageViewModel: ViewModelType, ObservableObject {
   private func copyMemeImage(with url: String?) async {
     do {
       try await self.copyImageUseCase.execute(url: url ?? "")
+      self.state.isActiveCopyPopup = true
     } catch {
       print("복사 실패")
     }

diff --git a/Projects/Features/Search/Sources/View/Result/SearchResultView.swift b/Projects/Features/Search/Sources/View/Result/SearchResultView.swift
@@ -11,6 +11,8 @@ import PPACModels
 import ResourceKit
 import DesignSystem
 
+import PopupView
+
 public struct SearchResultView: View {
   @ObservedObject var viewModel: SearchResultViewModel
 
@@ -58,5 +60,10 @@ public struct SearchResultView: View {
     .onAppear {
       viewModel.dispatch(type: .viewWillAppear)
     }
+    .popup(
+      isActive: $viewModel.state.isActiveCopyPopup,
+      image: ResourceKitAsset.Icon.copyFilled.swiftUIImage,
+      text: "이미지를 클립보드에 복사했어요"
+    )
   }
 }
diff --git a/Projects/Features/Search/Sources/View/Result/SearchResultViewModel.swift b/Projects/Features/Search/Sources/View/Result/SearchResultViewModel.swift
@@ -33,6 +33,7 @@ public final class SearchResultViewModel: ViewModelType, ObservableObject {
   public struct State {
     var keyword: String
     var memeList: [MemeDetail]
+    var isActiveCopyPopup: Bool = false
   }
 
   // MARK: - Properties
@@ -89,6 +90,7 @@ public final class SearchResultViewModel: ViewModelType, ObservableObject {
   private func copyImage(urlString: String) async {
     do {
       try await copyImageUseCase.execute(url: urlString)
+      state.isActiveCopyPopup = true
     } catch(let error) {
       debugPrint("error = \(error)")
     }

diff --git a/Projects/ResourceKit/Resources/Lottie/Tab_My.lottie b/Projects/ResourceKit/Resources/Lottie/Tab_My.lottie
@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.1","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":60.0000024438501,"w":100,"h":100,"nm":"mypage_new","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 3 Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[0]},{"t":15.0000006109625,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.292,7.292],[0.7620000000000005,-7.292]],"o":[[7.292,-0.7620000000000005],[-7.292,-7.292]],"v":[[7.292,7.292],[-7.292,-7.292]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7.5,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[71.875,67.708],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[49.998,28.306,0],"ix":2},"a":{"a":0,"k":[49.998,28.306,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":10.0000004073083,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-8.721,15.79],[15.79,8.72],[8.719000000000001,-15.79],[-15.79,-8.721]],"o":[[8.719000000000001,15.79],[15.79,-8.721],[-8.721,-15.79],[-15.79,8.72]],"v":[[-0.001,15.79],[15.79,0],[-0.001,-15.79],[-15.79,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.824,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[49.998,28.306],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50.004,71.64,0],"ix":2},"a":{"a":0,"k":[50.004,71.64,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":10.0000004073083,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[33.644000000000005,4.545000000000001],[-20.743000000000002,12.389],[-34.187999999999995,3.758],[-22.816000000000003,-21.616999999999997],[-1.788,-15.238],[0.619,-14.885],[9.686,-17.635],[35.806999999999995,-10.860000000000001]],"o":[[2.6190000000000033,21.63],[-33.703,4.541],[-35.808,-10.82],[-9.618,-17.613],[-0.6240000000000001,-14.885],[1.784,-15.238],[22.85,-21.629],[34.186,3.7249999999999996]],"v":[[32.84,4.988],[-32.954,4.995],[-34.285,2.887],[-9.618,-17.613],[-1.788,-15.238],[1.784,-15.238],[9.686,-17.635],[34.288,2.812]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.824,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[50.002,73.721],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}
diff --git a/Projects/ResourceKit/Resources/Lottie/Tab_Recommand.lottie b/Projects/ResourceKit/Resources/Lottie/Tab_Recommand.lottie
@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.1","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":60.0000024438501,"w":100,"h":100,"nm":"recommand_new","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-21.487000000000002,-39.725],[14.583,-39.725],[27.083,-33.797000000000004],[27.083,26.482],[21.486,39.725],[-14.583,39.725],[-27.083,33.795],[-27.083,-26.484]],"o":[[-14.583,-39.725],[21.486,-39.725],[27.083,-26.484],[27.083,33.795],[14.583,39.725],[-21.487000000000002,39.725],[-27.083,26.482],[-27.083,-33.797000000000004]],"v":[[-14.583,-39.725],[14.583,-39.725],[27.083,-26.484],[27.083,26.482],[14.583,39.725],[-14.583,39.725],[-27.083,26.482],[-27.083,-26.484]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10.292,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[50,50],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-10.417,-2.083],[-2.083,6.25],[10.417,-6.25]],"o":[[-10.417,-2.083],[-2.083,6.25],[10.417,-6.25]],"v":[[-10.417,-2.083],[-2.083,6.25],[10.417,-6.25]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[50,50],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[91.667,25],[91.667,75]],"o":[[91.667,25],[91.667,75]],"v":[[91.667,25],[91.667,75]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,0.741176470588,0.627450980392,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[8.333,25],[8.333,75]],"o":[[8.333,25],[8.333,75]],"v":[[8.333,25],[8.333,75]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,0.741176470588,0.627450980392,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":10.0000004073083,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[23.45,35.778],[-23.449,35.778],[-23.449,-35.778],[23.45,-35.778]],"o":[[23.45,35.778],[-23.449,35.778],[-23.449,-35.778],[23.45,-35.778]],"v":[[23.45,35.778],[-23.449,35.778],[-23.449,-35.778],[23.45,-35.778]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[49.611,50.415],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.1","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":60.0000024438501,"w":100,"h":100,"nm":"mypage_new","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 3 Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[0]},{"t":15.0000006109625,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.292,7.292],[0.7620000000000005,-7.292]],"o":[[7.292,-0.7620000000000005],[-7.292,-7.292]],"v":[[7.292,7.292],[-7.292,-7.292]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7.5,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[71.875,67.708],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[49.998,28.306,0],"ix":2},"a":{"a":0,"k":[49.998,28.306,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":10.0000004073083,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-8.721,15.79],[15.79,8.72],[8.719000000000001,-15.79],[-15.79,-8.721]],"o":[[8.719000000000001,15.79],[15.79,-8.721],[-8.721,-15.79],[-15.79,8.72]],"v":[[-0.001,15.79],[15.79,0],[-0.001,-15.79],[-15.79,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.824,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[49.998,28.306],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50.004,71.64,0],"ix":2},"a":{"a":0,"k":[50.004,71.64,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[0,0,100]},{"t":10.0000004073083,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[33.644000000000005,4.545000000000001],[-20.743000000000002,12.389],[-34.187999999999995,3.758],[-22.816000000000003,-21.616999999999997],[-1.788,-15.238],[0.619,-14.885],[9.686,-17.635],[35.806999999999995,-10.860000000000001]],"o":[[2.6190000000000033,21.63],[-33.703,4.541],[-35.808,-10.82],[-9.618,-17.613],[-0.6240000000000001,-14.885],[1.784,-15.238],[22.85,-21.629],[34.186,3.7249999999999996]],"v":[[32.84,4.988],[-32.954,4.995],[-34.285,2.887],[-9.618,-17.613],[-1.788,-15.238],[1.784,-15.238],[9.686,-17.635],[34.288,2.812]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8.824,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.996078491211,0.341176470588,0.227450995352,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[50.002,73.721],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":60.0000024438501,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true}