5
5
.
.
2
2
3
3
.
.
t
t
r
r
a
a
n
n
s
s
i
i
t
t
i
i
o
o
n
n
I
I
n
n
f
f
o
o
[
[
R
R
]
]
.transition modifier defines how to (Transitions tutorial goes into more detail)
● add View into the screen
● remove View from the screen
Transition Types
Slide - slide in the view from the leading (left) side and remove it towards the trailing (right) side
Move - slide in from the specified direction and remove it from the same direction (top, bottom, leading, trailing)
Offset - like the move transition but you can set your own x and y coordinate
Opacity - fade in the view when inserted and fade out the view when removed
Scale - insert the view FROM the scale specified and reverse the effect when removed
Syntax
.transition(AnyTransition.slide)
.transition(AnyTransition.move(edge: .top))
.transition(AnyTransition.move(edge: .bottom))
.transition(AnyTransition.move(edge: .leading))
.transition(AnyTransition.move(edge: .trailing))
.transition(AnyTransition.offset(x: 100, y: 100))
.transition(AnyTransition.opacity)
.transition(AnyTransition.scale(scale: 10))
.transition(AnyTransition.slide) .transition(AnyTransition.offset(x: 100, y: 100))
.transition(AnyTransition.move(edge: .top)) .transition(AnyTransition.move(edge: .bottom))
.transition(AnyTransition.move(edge: .leading)) .transition(AnyTransition.move(edge: .trailing))
.transition(AnyTransition.opacity) .transition(AnyTransition.scale(scale: 100)
S
S
l
l
i
i
d
d
e
e
Here we add Sliding Transition to the Image View.
This means that when Image is added to the Screen it will not just suddenly appear at its position.
After pressing the Button Image appears on the left and starts its Animation toward the center of the Screen.
And when we remove it, it will disappear from the Screen by sliding to the right .
No Transition
struct ContentView: View {
//STATE VARIABLE
@State private var show = true
//BODY
var body: some View {
VStack {
Button(action: { self.show.toggle() }) { Text("BUTTON") }
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.slide)
.animation(.default)
}
}
}
}
Initially Image is not shown After pressing the Button Image appears on the left
Then it slides into position at the center of the Screen Image leaves the Screen by sliding to the right
Image is removed fro the Screen
M
M
o
o
v
v
e
e
Move Transition slides in the View from the specified direction and removes the View from the same direction.
Available directions are: top, bottom, leading & trailing.
Move Transition
struct ContentView: View {
//STATE VARIABLE
@State private var show = false
//BODY
var body: some View {
VStack {
Button(action: { self.show.toggle() }) { Text("BUTTON") }
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.move(edge: .bottom))
.animation(.easeInOut(duration: 5))
}
}
}
}
.transition(AnyTransition.move(edge: .top)) .transition(AnyTransition.move(edge: .bottom))
.transition(AnyTransition.move(edge: .leading)) .transition(AnyTransition.move(edge: .trailing))
O
O
f
f
f
f
s
s
e
e
t
t
Offset Transition is like the move transition but you can set your own x and y coordinate from where to start.
Offset Transition
struct ContentView: View {
//STATE VARIABLE
@State private var show = false
//BODY
var body: some View {
VStack {
Button(action: { self.show.toggle() }) { Text("BUTTON") }
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.offset(x: 100, y: 100))
.animation(.easeInOut(duration: 5))
}
}
}
}
.transition(AnyTransition.offset(x: 100, y: 100))
O
O
p
p
a
a
c
c
i
i
t
t
y
y
Opacity Transition fades in the View when inserted and fades out the View when removed
Opacity Transition
struct ContentView: View {
//STATE VARIABLE
@State private var show = false
//BODY
var body: some View {
VStack {
Button(action: { self.show.toggle() }) { Text("BUTTON") }
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.opacity.animation(.easeInOut(duration: 5)))
}
}
}
}
.transition(AnyTransition.opacity)
S
S
c
c
a
a
l
l
e
e
Scale Transition inserts the View FROM the scale specified and reverses the effect when View is removed.
Scale Transition
struct ContentView: View {
//STATE VARIABLE
@State private var show = false
//BODY
var body: some View {
VStack {
Button(action: { self.show.toggle() }) { Text("BUTTON") }
if (show) {
Image("Table").resizable().frame(width: 200, height: 200)
.transition(AnyTransition.scale(scale: 100).animation(.easeInOut(duration: 5)))
}
}
}
}
.transition(AnyTransition.scale(scale: 100)
