Skip to content

Commit f28953e

Browse files
author
Mithun
committed
Scroll Animation in SwiftUI
1 parent c83f8cb commit f28953e

File tree

5 files changed

+115
-30
lines changed

5 files changed

+115
-30
lines changed

‎DesignCode.xcodeproj/project.pbxproj

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
ABB215E222DC472900424B38 /* UpdateStore.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABB215E122DC472900424B38 /* UpdateStore.swift */; };
1616
ABB215E422DC7D0000424B38 /* TabBar.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABB215E322DC7D0000424B38 /* TabBar.swift */; };
1717
ABB215E622DC808A00424B38 /* Settings.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABB215E522DC808A00424B38 /* Settings.swift */; };
18+
ABB215E822DC8ABD00424B38 /* CertificateRow.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABB215E722DC8ABD00424B38 /* CertificateRow.swift */; };
1819
ABE07CBF22D74F5700D209BE /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABE07CBE22D74F5700D209BE /* AppDelegate.swift */; };
1920
ABE07CC122D74F5700D209BE /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABE07CC022D74F5700D209BE /* SceneDelegate.swift */; };
2021
ABE07CC322D74F5700D209BE /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABE07CC222D74F5700D209BE /* ContentView.swift */; };
@@ -32,6 +33,7 @@
3233
ABB215E122DC472900424B38 /* UpdateStore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UpdateStore.swift; sourceTree = "<group>"; };
3334
ABB215E322DC7D0000424B38 /* TabBar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabBar.swift; sourceTree = "<group>"; };
3435
ABB215E522DC808A00424B38 /* Settings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Settings.swift; sourceTree = "<group>"; };
36+
ABB215E722DC8ABD00424B38 /* CertificateRow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CertificateRow.swift; sourceTree = "<group>"; };
3537
ABE07CBB22D74F5700D209BE /* DesignCode.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = DesignCode.app; sourceTree = BUILT_PRODUCTS_DIR; };
3638
ABE07CBE22D74F5700D209BE /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
3739
ABE07CC022D74F5700D209BE /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SceneDelegate.swift; sourceTree = "<group>"; };
@@ -78,6 +80,7 @@
7880
ABE07CC222D74F5700D209BE /* ContentView.swift */,
7981
AB62172622D870540039BC73 /* Home.swift */,
8082
ABB215E522DC808A00424B38 /* Settings.swift */,
83+
ABB215E722DC8ABD00424B38 /* CertificateRow.swift */,
8184
ABB215DD22DB713300424B38 /* UpdateList.swift */,
8285
ABB215DF22DB7F4700424B38 /* UpdateDetail.swift */,
8386
ABB215E122DC472900424B38 /* UpdateStore.swift */,
@@ -180,6 +183,7 @@
180183
ABE07CC322D74F5700D209BE /* ContentView.swift in Sources */,
181184
ABB215DC22DB353800424B38 /* BlurView.swift in Sources */,
182185
ABB215E622DC808A00424B38 /* Settings.swift in Sources */,
186+
ABB215E822DC8ABD00424B38 /* CertificateRow.swift in Sources */,
183187
ABB215E422DC7D0000424B38 /* TabBar.swift in Sources */,
184188
);
185189
runOnlyForDeploymentPostprocessing = 0;

‎DesignCode/CertificateRow.swift

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
//
2+
// CertificateRow.swift
3+
// DesignCode
4+
//
5+
// Created by Mithun x on 7/15/19.
6+
// Copyright © 2019 Mithun. All rights reserved.
7+
//
8+
9+
import SwiftUI
10+
11+
struct CertificateRow: View {
12+
13+
var certificates = certificateData
14+
15+
var body: some View {
16+
VStack(alignment: .leading) {
17+
Text("Certificates")
18+
.font(.system(size: 20))
19+
.fontWeight(.heavy)
20+
.padding(.leading, 20)
21+
22+
ScrollView(.horizontal, showsIndicators: false) {
23+
HStack(spacing: 20) {
24+
ForEach(certificates) { item in
25+
CertificateView(item: item)
26+
}
27+
}
28+
.padding(20)
29+
.padding(.leading, 20)
30+
}
31+
}
32+
}
33+
}
34+
35+
#if DEBUG
36+
struct CertificateRow_Previews: PreviewProvider {
37+
static var previews: some View {
38+
CertificateRow()
39+
}
40+
}
41+
#endif
42+
43+
struct Certificate: Identifiable {
44+
var id = UUID()
45+
var title: String
46+
var image: String
47+
var width: Int
48+
var height: Int
49+
}
50+
51+
let certificateData = [
52+
Certificate(title: "UI Design", image: "Certificate1", width: 230, height: 150),
53+
Certificate(title: "SwiftUI", image: "Certificate2", width: 230, height: 150),
54+
Certificate(title: "Sketch", image: "Certificate3", width: 230, height: 150),
55+
Certificate(title: "Framer", image: "Certificate4", width: 230, height: 150)
56+
]

‎DesignCode/ContentView.swift

+9-4
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,14 @@ struct CardView: View {
8888
}
8989

9090
struct CertificateView: View {
91+
92+
var item = Certificate(title: "UI Design", image: "Logo", width: 340, height: 220)
93+
9194
var body: some View {
9295
return VStack {
9396
HStack {
9497
VStack(alignment: .leading) {
95-
Text("UI Design")
98+
Text(item.title)
9699
.font(.headline)
97100
.fontWeight(.bold)
98101
.color(Color("accent"))
@@ -110,12 +113,14 @@ struct CertificateView: View {
110113
.padding(.horizontal)
111114
Spacer()
112115

113-
Image("Background")
116+
Image(item.image)
117+
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
118+
.offset(y: 50)
114119
}
115-
.frame(width: 340.0, height: 220.0)
120+
.frame(width: CGFloat(item.width), height: CGFloat(item.height))
116121
.background(Color.black)
117122
.cornerRadius(10)
118-
.shadow(radius: 20)
123+
.shadow(radius: 10)
119124
}
120125
}
121126

‎DesignCode/HomeList.swift

+45-25
Original file line numberDiff line numberDiff line change
@@ -13,37 +13,45 @@ struct HomeList: View {
1313
var courses = coursesData
1414

1515
var body: some View {
16-
VStack {
17-
HStack {
18-
VStack(alignment: .leading) {
19-
Text("Courses")
20-
.font(.largeTitle)
21-
.fontWeight(.heavy)
16+
ScrollView {
17+
VStack {
18+
HStack {
19+
VStack(alignment: .leading) {
20+
Text("Courses")
21+
.font(.largeTitle)
22+
.fontWeight(.heavy)
2223

23-
Text("22 Courses")
24-
.color(.gray)
24+
Text("22 Courses")
25+
.color(.gray)
26+
}
27+
Spacer()
2528
}
26-
Spacer()
27-
}
28-
.padding(.leading, 70.0)
29-
.padding(.bottom, 40)
29+
.padding(.leading, 70.0)
3030

31-
ScrollView(.horizontal, showsIndicators: false) {
32-
HStack(spacing: 30.0) {
33-
ForEach(courses) { item in
34-
PresentationLink(destination: ContentView()) {
35-
CourseView(title: item.title,
36-
image: item.image,
37-
color: item.color,
38-
shadowColor: item.shadowColor)
31+
ScrollView(.horizontal, showsIndicators: false) {
32+
HStack(spacing: 30.0) {
33+
ForEach(courses) { item in
34+
PresentationLink(destination: ContentView()) {
35+
GeometryReader { geometry in
36+
CourseView(title: item.title,
37+
image: item.image,
38+
color: item.color,
39+
shadowColor: item.shadowColor)
40+
.rotation3DEffect(Angle(degrees: Double(geometry.frame(in: .global).minX - 40) / -20), axis: (x: 0, y: 10.0, z: 0))
41+
}
42+
.frame(width: 246, height: 150)
43+
}
3944
}
4045
}
46+
.padding(.leading, 40)
47+
.padding(.top, 30)
48+
Spacer()
4149
}
42-
.padding(.leading, 40)
43-
Spacer()
50+
.frame(height: 450)
51+
CertificateRow()
4452
}
53+
.padding(.top, 78)
4554
}
46-
.padding(.top, 78)
4755
}
4856
}
4957

@@ -101,8 +109,20 @@ let coursesData = [
101109
image: "Illustration1",
102110
color: Color("background3"),
103111
shadowColor: Color("backgroundShadow3")),
104-
Course(title: "Design Course",
112+
Course(title: "Design and animate your UI",
105113
image: "Illustration2",
106114
color: Color("background4"),
107-
shadowColor: Color("backgroundShadow4"))
115+
shadowColor: Color("backgroundShadow4")),
116+
Course(title: "Swift UI Advanced",
117+
image: "Illustration3",
118+
color: Color("background7"),
119+
shadowColor: Color(hue: 0.677, saturation: 0.701, brightness: 0.788, opacity: 0.5)),
120+
Course(title: "Framer Playground",
121+
image: "Illustration4",
122+
color: Color("background8"),
123+
shadowColor: Color(hue: 0.677, saturation: 0.701, brightness: 0.788, opacity: 0.5)),
124+
Course(title: "Flutter for Designers",
125+
image: "Illustration5",
126+
color: Color("background9"),
127+
shadowColor: Color(hue: 0.677, saturation: 0.701, brightness: 0.788, opacity: 0.5)),
108128
]

‎DesignCode/Settings.swift

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ struct Settings: View {
2323
Toggle(isOn: $receive) {
2424
Text("Recieve Notifications")
2525
}
26-
Stepper(value: $number, in: /*@START_MENU_TOKEN@*/1...10/*@END_MENU_TOKEN@*/) {
26+
Stepper(value: $number, in: 1...10) {
2727
Text("\(number) Notification\(number > 1 ? "s" : "") per week")
2828
}
2929
Picker(selection: $selection, label: Text("Favourite course")) {

0 commit comments

Comments
 (0)