shadowfacts
/
v6
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Define hero transition

This commit is contained in:
Shadowfacts 2023-05-22 07:11:35 -07:00
parent 9ef07cd6e2
commit 6d412cd511
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/posts/2023-05-21-swiftui-hero-transition.md
View File

@ -6,7 +6,7 @@ short_desc = ""
slug = "swiftui-hero-transition" slug = "swiftui-hero-transition"
``` ```
Out of the box, SwiftUI has a [`matchedGeometryEffect`](https://developer.apple.com/documentation/swiftui/view/matchedgeometryeffect(id:in:properties:anchor:issource:)) modifier that makes it relatively easy to build hero transitions. It's cool that SwiftUI includes this out of the box, but unfortunately it has a few limitations that make it unsuitable for certain use cases. Particularly for me, that it doesn't work with presenting another view. Most examples on the internet[^1] work around this by faking a custom presented view: just slap a full-screen background color down and show your content on top of it. That's essentially the same as a presenting a full-screen view, with the one major caveat that the pseudo-presented view can only cover the containing hosting controller. And if that controller isn't full-screen (say, if it's presented as a sheet), you can't present anything that's truly full-screen. So, let's build a custom hero transition that actually presents it's content across the entire screen. Out of the box, SwiftUI has a [`matchedGeometryEffect`](https://developer.apple.com/documentation/swiftui/view/matchedgeometryeffect(id:in:properties:anchor:issource:)) modifier that makes it relatively easy to build hero transitions (a style of transition where a new screen is presented and part of the source screen changes position and size to reach it's place on the new screen). It's cool that SwiftUI includes this out of the box, but unfortunately it has a few limitations that make it unsuitable for certain use cases. Particularly for me, that it doesn't work with presenting another view. Most examples on the internet[^1] work around this by faking a custom presented view: just slap a full-screen background color down and show your content on top of it. That's essentially the same as a presenting a full-screen view, with the one major caveat that the pseudo-presented view can only cover the containing hosting controller. And if that controller isn't full-screen (say, if it's presented as a sheet), you can't present anything that's truly full-screen. So, let's build a custom hero transition that actually presents it's content across the entire screen.
[^1]: The SwiftUI Lab has a good [example](https://github.com/swiftui-lab/swiftui-hero-animations) of this technique. [^1]: The SwiftUI Lab has a good [example](https://github.com/swiftui-lab/swiftui-hero-animations) of this technique.