So I Wanted To Rewrite Some Old Swift Code
Just this past week, I unearthed some Swift code I wrote almost three years ago. Naturally, it no longer works whatsoever without a considerable refactor. I gave it a once over, and realised how far I'd come in terms of what I could write then, and what I can now.
In what I can only classify as a lapse of sanity, I decided to rewrite and re-publish it.
Jumping Through Hoops
Sometimes I'll come across an animation in an app that’s really f**king awesome. It’s superfluous, but I love it. I think that this kind of thing adds a touch of humanity, which keeps customers coming back. Well, it keeps me coming back at any rate.
Last time, I wrote a circular transition between screens. So we’ll replicate it now, using Swift 4.2, instead of Swift 2.0. And no, Rod, there’s no KVO this time.
Create a new "Single View" project in Xcode. Then paste the following in your UIViewController class. Make sure to change the identity type to
ParentViewController in Storyboard!
- The showChild() function will eventually link to a button. It will call a segue which will be setup in Storyboard later.
- The unwindToParent() function will be called from the child view controller, and the parent view controller will appear again.
- If you don't wish to use segues, you can merely use push/pop on
Next, add a new
UIViewController subclass to your project, and call it
Now, open the
Main.storyboard, add a View Controller, and change the class to match. Then, control-drag from Parent to Child, and assign a “Show” segue. Select the yellow icon in
ChildViewController, control-drag from it to the exit icon, and link up the
Make sure that
ChildViewController looks like this:
Finally, add a
UINavigationController, and ensure it is the “Initial View Controller.” Then ensure that
ParentViewController is the Root View Controller for the navigation stack.
Replace your parent view controller with the following:
ParentViewControlleris the registered recipient of events for the transition. Or it will be, once I replace that
extensionis a good way to delineate functionality within your Swift classes, structs et al, in order to achieve that “KonMari” New Year’s Resolution you set and never achieved.
Now create a new file, calling it
ShapeTransition. Then paste the following gist into it:
Then replace that
nil in your
ShapeTransition class with the following:
What’s it doing? I’ll break it down.
- Keeping a weak reference to the
transitionContext, so we can complete the transition when the
CAAnimationstops. If you won’t use
CAAnimationyou can omit this, and call
- Ensuring that the
snapshotwe take matches that of
from. Try the effect without this, and see what it looks like!
from, since the animation moves a bitmap of the view (snapshot). You could skip the snapshot part and use the real view instead if you prefer!
- Animating the snapshot view off in a southwesterly direction, and scaling it up to 5x its original size.
towith a circle, and growing that circle to a size big enough to reveal the full content, then completing.
If you run the app now, your transition should work when you trigger the “showChild” segue.
See the preview GIF for a basic UI layout you can set up to make this happen.
You can also go wild and use whatever
UIBezierPath you like! You can move the
origin from the top right corner to wherever you want, you can make the animation as fast, or slow as you want… you get the gist 😉.
Show me what you make! 🙏
If you liked this post, consider giving me a clap, or seven. このストーリーを好きなら、「拍手」して押して頂けないでしょうか。