So I Wanted To Rewrite Some Old Swift Code

One More Time. Just Do It Again.

Introduction

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.

Preview

Let’s Go!

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!

Breakpoint

• 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 UINavigationController instead.

Next, add a new UIViewController subclass to your project, and call it ChildViewController.

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 inChildViewController, control-drag from it to the exit icon, and link up the unwindToParent method.

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.

Getting There!

Replace your parent view controller with the following:

Breakpoint

• ParentViewController is the registered recipient of events for the transition. Or it will be, once I replace that nil in there.
• Using extension is 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 ParentViewController with ShapeTransition().

Animate!

Replace the 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 CAAnimation stops. If you won’t use CAAnimation you can omit this, and call completeTransition inside aUIView.animate completion block.
• Ensuring that the backgroundColor behind the snapshot we take matches that of from. Try the effect without this, and see what it looks like!
• Removing 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.
• Masking to with a circle, and growing that circle to a size big enough to reveal the full content, then completing.

Conclusion

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. このストーリーを好きなら、「拍手」して押して頂けないでしょうか。