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

Hero Transition corrections

This commit is contained in:
Shadowfacts 2024-01-16 15:58:18 -05:00
parent c54a5c273d
commit 23f447bfa8
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -122,6 +122,8 @@ func updateUIViewController(_ uiViewController: UIViewController, context: Conte
}
```
Lastly, we can declare an extension on `View` called `presentViewController` which takes the same arguments as the modifier type and applies it to `self`.
## The Approach
Now that we have the ability to present a custom view controller, let's think about what that VC actually needs to contain for the matched geometry effect. The transition we want to achieve is split into two parts: the matched geometry and everything else. The frames of the views being matched should animate smoothly from source to destination, and the views themselves should be visible the entire time. The rest of the presented content, however, is not matched and should appear with some other animation. There are multiple options, but I'm going to go with a simple fade-in.
@ -235,7 +237,7 @@ struct MatchedGeometrySourceModifier<Matched: View>: ViewModifier {
func body(content: Content) -> some View {
content
.background(GeometryReader {
.background(GeometryReader { proxy in
Color.clear
.preference(key: MatchedGeometrySourcesKey.self, value: [
id: (AnyView(matched), proxy.frame(in: .global))
@ -309,7 +311,7 @@ override func viewDidLoad() {
super.viewDidLoad()
let sources = self.sources.map { (id: $0.key, view: $0.value.0, frame: $0.value.1) }
let matchedContainer = MatchedContainerView(sources: sources)
let matchedContainer = MatchedContainerView(sources: sources, state: state)
matchedHost = UIHostingController(rootView: matchedContainer)
matchedHost.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
matchedHost.view.frame = view.bounds
@ -331,6 +333,7 @@ The container view for the matched views will, for now, just display all of the
```swift
struct MatchedContainerView: View {
let sources: [(id: AnyHashable, view: AnyView, frame: CGRect)]
@ObservedObject var state: MatchedGeometryState
var body: some View {
ZStack {
@ -623,7 +626,7 @@ The other piece of the puzzle is that `UIViewPropertyAnimator` will call the com
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
// ...
matchedGeomVC.view.layer.opacity = 0
matchedGeomVC.contentHost.view.layer.opacity = 0
let spring = UISpringTimingParameters(mass: 1, stiffness: 150, damping: 15, initialVelocity: .zero)
let animator = UIViewPropertyAnimator(duration: self.transitionDuration(using: transitionContext), timingParameters: spring)
animator.addAnimations {