I am trying to re-create the Instagram transition when viewing a photo.
Transition Description / Goal
When tapping on a photo, the photo expands revealing a new view controller. When dragging/panning the view controller, the view controller shrinks slightly and can be dragged around. When swiped in a certain direction with enough velocity/force, the view controller condenses back into the photo seamlessly.
Added a custom pan gesture to the UINavigationController subclass
Added logic in the pan callback using Hero.shared
Added the .scale(0.0) modifier to the custom UINavigationController
When I present the custom UINavigationController, it scales out from the middle of the screen.
When I pan the uinavcontroller, you can see in the image below, it pans well and I can drag it around. However, when I dismiss it, it just scales back into the middle of the screen.
The panning / dragging the presented VC around is working, however, presenting and dismissing the UINavigationController simply scales the view controller to zero in the middle of the screen.
I am instead, hoping to "shrink" the view controller, perhaps shrinking the view controller into a square, covering its subviews/content so only the image is visible (just like the Instagram example), and then having this condensed image translate into the original image found on the uitableviewcell? My ultimate question is how can I do this?
How can still keep the dragging/panning of a view controller, with the swipe to dismiss, while also having the view controller shrink its CGRect to only contain the Image, and have this image translate & scale back to the original uitableviewcell image?
Code highlights
My project is linked below so you can see all of the code. However, here is the highlights:
In my first view controller that presents the second view controller:
// First view controller
class JobsViewController : UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
hero.isEnabled = true
hero.modalAnimationType = .none
navigationController?.hero.modalAnimationType = .none
navigationController?.hero.isEnabled = true
}
// ...
func myTransition() {
let vc = ViewJobViewController()
let nav = PanNavigationController(vc: vc) // my custom nav class
self.present(nav, animated: true, completion: nil)
}
}
I am trying to re-create the Instagram transition when viewing a photo.
Transition Description / Goal
When tapping on a photo, the photo expands revealing a new view controller. When dragging/panning the view controller, the view controller shrinks slightly and can be dragged around. When swiped in a certain direction with enough velocity/force, the view controller condenses back into the photo seamlessly.
Link to video of the transition: https://drive.google.com/file/d/16oD3mkzLrE-9aEkS-_AETchvdjzQIA-l/view?usp=sharing
Photos of the transition:
My progress
UINavigationController
UINavigationController
subclassHero.shared
.scale(0.0)
modifier to the customUINavigationController
When I present the custom
UINavigationController
, it scales out from the middle of the screen.When I pan the uinavcontroller, you can see in the image below, it pans well and I can drag it around. However, when I dismiss it, it just scales back into the middle of the screen.
Link to video of my current progress: https://drive.google.com/file/d/1jOzMUk8n81kx0L0FleugaBMY01LMAEDh/view?usp=sharing
My main problem
The panning / dragging the presented VC around is working, however, presenting and dismissing the UINavigationController simply scales the view controller to zero in the middle of the screen.
I am instead, hoping to "shrink" the view controller, perhaps shrinking the view controller into a square, covering its subviews/content so only the image is visible (just like the Instagram example), and then having this condensed image translate into the original image found on the uitableviewcell? My ultimate question is how can I do this?
How can still keep the dragging/panning of a view controller, with the swipe to dismiss, while also having the view controller shrink its CGRect to only contain the Image, and have this image translate & scale back to the original uitableviewcell image?
Code highlights
My project is linked below so you can see all of the code. However, here is the highlights:
In my first view controller that presents the second view controller:
My second view controller:
Any help would be greatly appreciated! Thanks!
General Information
Hero Version: Latest
iOS Version(s): Latest
Swift Version: 5.3
Devices/Simulators: iPhone XS
Reproducible in Examples? (Yes/No): Yes
Demo Project
https://github.com/josharnoldjosh/HeroDemo