5
5
.
.
1
1
2
2
.
.
4
4
M
M
a
a
g
g
n
n
i
i
f
f
i
i
c
c
a
a
t
t
i
i
o
o
n
n
I
I
n
n
f
f
o
o
This tutorial shows how to use .gesture( Magnification() ).
Hold option key to simulate Magnification while dragging Left Mouse Button.
Closure Parameter value holds the amount of magnification that is applied.
Methods onEnded() & updating() accept Trailing Closure as last Parameter so it can be declared outside Parameters List.
Content
.updating() - Resize View while magnifying (Called while magnifying. View returns to initial size at the end)
.onEnded() - Resize View when magnification ends (Called when Gesture ends. Size is increased at the end)
Combine previous examples
.
.
u
u
p
p
d
d
a
a
t
t
i
i
n
n
g
g
(
(
)
)
-
-
R
R
e
e
s
s
i
i
z
z
e
e
V
V
i
i
e
e
w
w
w
w
h
h
i
i
l
l
e
e
m
m
a
a
g
g
n
n
i
i
f
f
y
y
i
i
n
n
g
g
Method updating()
● is called while magnifying (to give us information about current position)
● accepts @GestureState (as its first parameter)
● which can be updated inside trailing Closure (its second Parameter, through Closure's in-out state parameter)
This example shows how to change size of the View as we magnify it which is done by
● adjusting frame size with
● @GestureState size
● which is updated with value inside updating() method (every update redraws View)
● through in-out state parameter that points to $size (which must be @GestureState for this to work)
When Magnification Gesture stops
● View returns to its original size
● because magnification value returns to zero
.updating()
struct ContentView: View {
@GestureState private var magnification : CGFloat = 0
var body: some View {
Circle()
.fill(Color.green)
.frame(width: 50 + magnification, height: 50 + magnification)
.gesture( MagnificationGesture()
.updating($magnification ) { (value, state, transaction) in //Trailing Closure for body Parameter
if value.isFinite { state = value } //Amount of magnification
}
)
}
}
Initial & final size Size changes as we magnify
.
.
o
o
n
n
E
E
n
n
d
d
e
e
d
d
(
(
)
)
-
-
R
R
e
e
s
s
i
i
z
z
e
e
V
V
i
i
e
e
w
w
w
w
h
h
e
e
n
n
m
m
a
a
g
g
n
n
i
i
f
f
i
i
c
c
a
a
t
t
i
i
o
o
n
n
e
e
n
n
d
d
s
s
In this example we change the size of circle at the end of Magnification Gesture.
Method onEnded()
● is called when we finish magnifying
● accepts Trailing Closure as its last Parameter which is why Closure can be declared outside Parameters List
● updates @State variable magnification which changes the size of the circle
.onEnded()
struct ContentView: View {
@State var finalMagnification : CGFloat = 0
var body: some View {
Circle()
.fill(Color.green)
.frame(width: 50 + finalMagnification, height: 50 + finalMagnification)
.gesture( MagnificationGesture()
.onEnded { (value) in
if value.isFinite { self.finalMagnification = value }
}
)
}
}
Console
16.502472730400633
Initial size Final size
C
C
o
o
m
m
b
b
i
i
n
n
e
e
p
p
r
r
e
e
v
v
i
i
o
o
u
u
s
s
e
e
x
x
a
a
m
m
p
p
l
l
e
e
s
s
This example is combination of previous examples
● .updating() - Resize View while magnifying (Called while magnifying. View returns to initial size at the end)
● .onEnded() - Resize View when magnification ends (Called when Gesture ends. Size is increased at the end)
Initial size Size changes as we magnify. Final size.
ContentView.swift
struct ContentView: View {
@GestureState var magnification : CGFloat = 0
@State var finalMagnification : CGFloat = 0
var body: some View {
Circle()
.fill(Color.green)
.frame(width: 50 + magnification + finalMagnification, height: 50 + magnification + finalMagnification)
.gesture( MagnificationGesture()
.updating($magnification ) { (value, state, transaction) in //Trailing Closure for body Parameter
if value.isFinite { state = value } //Amount of magnification
}
.onEnded { (value) in
if value.isFinite { self.finalMagnification = value }
}
)
}
}
