Circular transition (mask) in iOS and Objective C

Question

We were wondering how we can easily build a circular mask, that blends out the background and transitions into a new view, with new buttons? See example here (watch the red planet gets triggered):

Communication

how to do the custom transition of 'start button clicked' – Tarboosh

Answer 1

//Swift 4

This is a simple static method for circular bubble transition from a point screen.

//as shown on this link https://github.com/andreamazz/BubbleTransition

    import UIKit

    class AnimationUtility: UIViewController {
        static func animateBubbleTrnsitionView( selfView: UIView, point : CGPoint) {
                //let button = CGRect.init(x: 30, y: selfView.frame.size.height - 15, width: 45, height: 45)
                let button = CGRect.init(x: point.x, y: point.y, width: 0, height: 0)

                let circleMaskPathInitial = UIBezierPath(ovalIn: CGRect.init(x: point.x, y: point.y, width: 1, height: 1))
                let extremePoint = CGPoint(x: point.x, y: 15 - selfView.frame.size.height - 200)
                let radius = sqrt((extremePoint.x*extremePoint.x) + (extremePoint.y*extremePoint.y))
                let circleMaskPathFinal = UIBezierPath(ovalIn: (button.insetBy(dx: -radius, dy: -radius)))

                let maskLayer = CAShapeLayer()
                maskLayer.path = circleMaskPathFinal.cgPath
                selfView.layer.mask = maskLayer

                let maskLayerAnimation = CABasicAnimation(keyPath: "path")
                maskLayerAnimation.fromValue = circleMaskPathInitial.cgPath
                maskLayerAnimation.toValue = circleMaskPathFinal.cgPath
                maskLayerAnimation.duration =  0.9
                maskLayer.add(maskLayerAnimation, forKey: "path")
            }
}

Use this code in following way Perform segue or push without animation.

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
            // Get the new view controller using segue.destinationViewController.
            // Pass the selected object to the new view controller.
            switch segue.identifier! {
            case "navToHomeWithoutanimation":
                self.navigationController?.view.backgroundColor = APP_ORANGE_COLOR  //which ever color you want
                let vc = segue.destination as! MapViewController
                AnimationUtility.animateBubbleTrnsitionView(selfView: vc.view, point: self.view.center)
                break
    }
   }

//The animation will start to animate from given point.

Servomechanical

If you are using this with pushViewController or segue, perform with no animation, then you will be able to see the perfect effect. I haven't tried this with presentViewController, but it should work hopefully. – Servomechanical

Answer 2

Swift code :

I writted all code appdelegate file. Used a screenshot of timeline rather than a full-blown UITableView.

First, let’s add the screenshot on the window:

let imageView = UIImageView(frame: self.window!.frame)
imageView.image = UIImage(named: "twitterscreen")
self.window!.addSubview(imageView)


self.mask = CALayer()
self.mask!.contents = UIImage(named: "twitter logo mask").CGImage
self.mask!.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
self.mask!.anchorPoint = CGPoint(x: 0.5, y: 0.5)
self.mask!.position = CGPoint(x: imageView.frame.size.width/2, y: imageView.frame.size.height/2)
imageView.layer.mask = mask

animating the mask. You’ll observe that the bird reduces in size for a bit, and then increases in size, so to do that using just one animation, let’s use CAKeyframeAnimation.

let keyFrameAnimation = CAKeyframeAnimation(keyPath: "bounds")
keyFrameAnimation.duration = 1
keyFrameAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)]
let initalBounds = NSValue(CGRect: mask!.bounds)
let secondBounds = NSValue(CGRect: CGRect(x: 0, y: 0, width: 90, height: 90))
let finalBounds = NSValue(CGRect: CGRect(x: 0, y: 0, width: 1500, height: 1500))
keyFrameAnimation.values = [initalBounds, secondBounds, finalBounds]
keyFrameAnimation.keyTimes = [0, 0.3, 1]
self.mask!.addAnimation(keyFrameAnimation, forKey: "bounds")

If you see result please visit the github repo. https://github.com/rounak/TwitterBirdAnimation/

Krell