The right way to do a Twitter-like mask loading animation? - ios

Question

I've been trying to make a loading screen similar to Twitter's loading overlay here:
I'm not sure if the way I've approached this is the "right" way to do things at all. My concerns are many:
Is there a better way to pick the mask image I'm using for various screen sizes? The mask needs to extend to the edges of the screen to work with the background color, so I'm making it the size of the phone's possible bounds.
Are animations being handled correctly? This is my first use of CATransaction for anything.
Should I be adding the view to the tab bar controller's view like I'm doing?
Is there any way to abstract this out, or a better place to put this in the app's lifecycle? As of now I need to duplicate this code and place it any controller that could be a starting point (two controllers as of now).
You can see what I've written so far below:
override func viewDidLoad() {
super.viewDidLoad()
prepareLoadingOverlay()
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
animateMask()
}
var mask: CALayer?
var blueView: UIImageView?
func prepareLoadingOverlay() {
let size = UIScreen.mainScreen().bounds.size
var cutoutImage: UIImage?
switch size.height {
case 420:
cutoutImage = CutoutMap.Image480 // UIImage
case 568:
cutoutImage = CutoutMap.Image568
case 667:
cutoutImage = CutoutMap.Image667
case 736:
cutoutImage = CutoutMap.Image736
default:
cutoutImage = CutoutMap.Image667
}
if let tabBarViewController = self.tabBarController,
let cutout = cutoutImage {
let containerFrame = tabBarViewController.view.frame
blueView = UIImageView.init(frame: containerFrame)
blueView!.image = UIImage.imageFromColor(Color.Blue)
self.mask = CALayer()
self.mask?.contents = cutout.CGImage
self.mask?.bounds = CGRect(x: 0, y: 0, width: size.width, height: size.height)
self.mask?.anchorPoint = CGPoint(x: 0.5, y: 0.5)
self.mask?.position = CGPoint(x: containerFrame.size.width/2, y: containerFrame.size.height/2)
tabBarViewController.view.addSubview(blueView!)
blueView!.layer.mask = self.mask
}
}
func animateMask() {
let size = UIScreen.mainScreen().bounds.size
if let mask = self.mask {
CATransaction.begin()
CATransaction.setAnimationDuration(1)
CATransaction.setCompletionBlock { () -> Void in
CATransaction.begin()
CATransaction.setAnimationDuration(1)
CATransaction.setCompletionBlock { () -> Void in
self.blueView?.removeFromSuperview()
}
mask.bounds = CGRect(x: 0, y: 0, width: size.width*15, height: size.height*15)
CATransaction.commit()
}
mask.bounds = CGRect(x: 0, y: 0, width: size.width, height: size.height)
CATransaction.commit()
}
}
Any help on this would be greatly appreciated!