hi today i want to show you a really
cool feature in swift ui which is called
match geometry effect now you can see
that there's a lot of transition
animations and especially
when it comes to the custom ones like
this one
you can see that this is using something
that can be facilitated
by match geometry because we're
transitioning shared elements from one
screen to another such as the picture
[Music]
itself
[Applause]
so let's take a look at how we can
recreate this in xcode
we have two different views we have the
scroll view
with this rectangle here
and then we have the rectangle for the
full screen view
when i tap on this one it's going to go
to the full screen view and when i tap
again it's going to go back
notice that the title is also
transitioning perfectly
so we're going to use match symmetry
effect for this let's start with this
tutorial
with a very simple setup we have a state
called show
which is going to toggle between the
original
screen and the full view to simplify
things
i'm going to set the on tab gesture on
the z stack so i can
click and toggle between the two states
first of all i'm going to set my two
screens so if
starting with show is equal to false
so the exclamation point is equivalent
to that
and i'm going to put my original
rectangle
i'm going to set else rectangle
parentheses and this time i'm going to
use a frame
and i'm going to want to set the
rectangle to take the full width
with a maximum height of 400 so i'm
going to set max width
dot infinity max height
400. right now if you click on it
there's no animation going on it's just
a simple transition
what we want to do is to set a custom
transition
so we're going to need to use match
geometry effect
and this is going to require something
we call
a namespace so add namespace var
namespace
i'm gonna go to these two screens
and set the match symmetry but it has to
be done
before the frame so dot
mass geometry effect and this is
requiring two values the first one
is the id because you can have multiple
elements
that you want to transition so i'm going
to start
with the shape because the rectangle is
a shape
and then i'm going to set the name space
for or animation
to be the same as the second screen so
before the frame
match geometry effect shape again
and name space now we're pairing these
two rectangle shapes
and we want them to automatically
animate
regardless where they're going to be in
terms of positioning
and size when i resume my preview you're
going to see that
it does a perfect transition the cool
thing about
matchimetry effect is that i can move
this anywhere in the screen and it's
going to automatically
transition the position and the size so
even if i put this
inside an edge stack and i'm going to
create another rectangle
parenthesis and set frame
with 100 height 100.
so the first rectangle with the match
imagery has moved a little bit to the
left
and yet we have the same beautiful
custom transition
and even if i add let's say a scroll
view
so embed in vstack first and change this
into a scroll view
it's going to move to the top and it
still
animates beautifully you might need to
set the spacer because otherwise your
scroll view is not going to take the
full width
and the scroll view having a clipped
behavior is going to create some issues
but otherwise if you set it to the full
size
it's going to be perfect now you might
be wondering well what happens if i have
a text or a v stack first of all
matrometry effect does not work well
in a container such as a v stack and h
stack instead
what i would do is to set the v stack
let's say parentheses and i'm going to
set
my text to title
and the shape itself should be in a
background
i'm going to move the rectangle shape
and put that into a background modifier
of the v-stack
and then paste that right there now i'm
going to need to
move my frame otherwise my v-stack does
not have
a size and that's why we have this weird
dimension here
and my rectangle is going to have the
match geometry
and voila it works perfectly
this is where we can also set the same
structure
for the new view so i'm going to apply
the same technique
and set a v stack with a text
title and put the rectangle
inside a background modifier
so i'm going to move the whole rectangle
inside the content of the background
and then because my shape is going to
take
the maximum space i can just move the
frame
to the stack instead
so now both of these elements is going
to have
the title element and let me clean this
up
a little bit in term of the modifiers
and
indentation
so now we have two views this one has a
scroll view and h
stack this one has nothing it's just a
view with a v stack
and the text we have the background
shape
that is going to transition from one
screen to another
and that's why we have something like
this but now we have the title that
should also transition
from one to another but first of all
this is black on black so i'm going to
set
to foregroundcolor.white
let me just copy this and put this
in the full screen as well you can see
that
the title does not transition and
we can add another match geometry in the
same namespace so dot
match geometry this time is going to be
title
and in the same namespace let me copy
the same modifier for the end screen
and when i move voila both the shape
and the title transitions so to
summarize
it is important to note that match
geometry effect works really well on
shape text buttons but does not work
well on the container
which is why we have to be creative and
put the shape
inside the background modifier and
now the shape is going to synchronize
and not the stack itself with the
background so i hope you found this
useful
and i look forward to see what you're
going to create with match geometry
effect
i'll see you in the next video