So I Wanted To Rewrite Some Old Swift Code

One More Time. Just Do It Again.

Introduction

In what I can only classify as a lapse of sanity, I decided to rewrite and re-publish it.

Jumping Through Hoops

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!

Breakpoint

  • 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!

Breakpoint

  • 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!

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

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

Aussie iOS Engineer based in Tokyo, Japan | 日英可

Aussie iOS Engineer based in Tokyo, Japan | 日英可