I recently stumbled upon a really excellent article online entitled “UIDynamics, UIKit or OpenGL? 3 Types of iOS Animations For the Star Wars.” A lot of great discussion about performance of interesting techniques in a iOS user interface. I read through it and without going to the Github repository to check out any code I decided to try to replicate that mask animation.
I am not a huge fan of Google’s Android Material Design, but the animated mask aspect of a user interaction is interesting, attention grabbing without being too heavy-handed, and playful. And it was a bit of a challenge as I have never tried masking anything at all in an iOS application.
By the way, I have a handy extension that you might love for use in Swift applications. It allows me to provide hex values to provide UIColor attributes to things.
extension UIColor { convenience init(red: Int, green: Int, blue: Int) { assert(red >= 0 && red <= 255, "Invalid red component") assert(green >= 0 && green <= 255, "Invalid green component") assert(blue >= 0 && blue <= 255, "Invalid blue component") self.init(red: CGFloat(red) / 255.0, green: CGFloat(green) / 255.0, blue: CGFloat(blue) / 255.0, alpha: 1.0) } convenience init(netHex:Int) { self.init(red:(netHex >> 16) & 0xff, green:(netHex >> 8) & 0xff, blue:netHex & 0xff) } }
Anyway, here is the full view controller class. The method close and showUnderView is where the masking action takes place. Make careful consideration of the order in which you add subviews. Here is an example of what I have going on.
import UIKit extension UIColor { convenience init(red: Int, green: Int, blue: Int) { assert(red >= 0 && red <= 255, "Invalid red component") assert(green >= 0 && green <= 255, "Invalid green component") assert(blue >= 0 && blue <= 255, "Invalid blue component") self.init(red: CGFloat(red) / 255.0, green: CGFloat(green) / 255.0, blue: CGFloat(blue) / 255.0, alpha: 1.0) } convenience init(netHex:Int) { self.init(red:(netHex >> 16) & 0xff, green:(netHex >> 8) & 0xff, blue:netHex & 0xff) } } class ViewController: UIViewController { var underView:UIView! var darkSide:Bool = false var mySwitch:UISwitch! let animSpeed:CFTimeInterval = 0.25 override func prefersStatusBarHidden() -> Bool { return true } override func viewDidLoad() { super.viewDidLoad() self.view.backgroundColor = UIColor(netHex: 0xBBBBBB) let topLayer = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 60)) topLayer.userInteractionEnabled = false let topLabel = UILabel(frame: CGRectMake(0, 15, self.view.frame.size.width, 20)) topLabel.text = "S E T T I N G S" topLabel.textColor = UIColor.whiteColor() topLabel.font = UIFont(name: "AvenirNext-Regular", size: 16) topLabel.textAlignment = NSTextAlignment.Center topLayer.addSubview(topLabel) underView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)) underView.backgroundColor = UIColor.blackColor() let vader = UIImageView(frame: CGRectMake(0, 50, self.view.frame.size.width, 290)) vader.image = UIImage(named: "vader.jpg") vader.contentMode = .ScaleAspectFill let closeButton = UIButton(frame: CGRectMake(underView.frame.size.width - 50, 20, 30, 30)) closeButton.setTitleColor(UIColor.redColor(), forState: .Normal) closeButton.setTitle("X", forState: .Normal) closeButton.addTarget(self, action: "close", forControlEvents: .TouchUpInside) //Elements above it all. let drkSide = UILabel(frame: CGRectMake(20, 360, 200, 20)) drkSide.textColor = UIColor(netHex: 0x777777) drkSide.font = UIFont.systemFontOfSize(13) drkSide.text = "DARK SIDE" let rule = UIView(frame: CGRectMake(20, 390, self.view.frame.size.width - 40, 1)) rule.backgroundColor = UIColor(netHex: 0x666666) let nameHead = UILabel(frame: CGRectMake(20, 410, 200, 20)) nameHead.textColor = UIColor(netHex: 0x777777) nameHead.font = UIFont.systemFontOfSize(13) nameHead.text = "FULL NAME" let darth = UILabel(frame: CGRectMake(20, 450, 200, 20)) darth.textColor = UIColor(netHex: 0x777777) darth.font = UIFont.systemFontOfSize(14) darth.text = "Darth Vader" let anakin = UILabel(frame: CGRectMake(20, 450, 200, 20)) anakin.textColor = UIColor(netHex: 0x777777) anakin.font = UIFont.systemFontOfSize(14) anakin.text = "Anakin Skywalker" let mask = CALayer() mask.contents = UIImage(named:"mask.png")?.CGImage mask.frame = CGRectMake(self.view.frame.size.width - 100, 300, 0, 0) underView.layer.mask = mask mySwitch = UISwitch(frame: CGRectMake(self.view.frame.size.width - 70, 350, 0, 0)) mySwitch.on = false mySwitch.enabled = true mySwitch.onTintColor = UIColor.redColor() mySwitch.addTarget(self, action: "switched:", forControlEvents: .ValueChanged) let luke = UIImageView(frame: CGRectMake(0, 50, self.view.frame.size.width, 290)) luke.image = UIImage(named: "luke.png") luke.contentMode = .ScaleAspectFill underView.addSubview(vader) underView.addSubview(closeButton) self.view.addSubview(luke) self.view.addSubview(anakin) topLayer.addSubview(drkSide) topLayer.addSubview(rule) topLayer.addSubview(nameHead) self.view.addSubview(underView) self.view.addSubview(mySwitch) self.view.addSubview(topLayer) underView.addSubview(darth) } func switched(sender:UISwitch){ if sender.on == true { showUnderView() } else { close() } } //Reverse the mask animation. func close(){ darkSide = false self.mySwitch.setOn(false, animated: true) let mask = underView.layer.mask let oldBounds = mask!.bounds let newBounds = CGRectMake(mySwitch.center.x, mySwitch.center.y, 0, 0) let revealAnimation = CABasicAnimation(keyPath: "bounds") revealAnimation.fromValue = NSValue(CGRect: oldBounds) revealAnimation.toValue = NSValue(CGRect: newBounds) revealAnimation.duration = animSpeed //Keep the bounds after the animation completes. mask!.bounds = newBounds mask!.addAnimation(revealAnimation, forKey: "revealAnimation") } func showUnderView(){ if darkSide == true { return } darkSide = true let mask = CALayer() mask.contents = UIImage(named:"mask.png")?.CGImage mask.frame = CGRectMake(mySwitch.center.x, mySwitch.center.y, 0, 0) underView.layer.mask = mask let oldBounds = mask.bounds let newBounds = CGRectMake(0, 0, 1600, 1600) let revealAnimation = CABasicAnimation(keyPath: "bounds") revealAnimation.fromValue = NSValue(CGRect: oldBounds) revealAnimation.toValue = NSValue(CGRect: newBounds) revealAnimation.duration = animSpeed //Keep the bounds after the animation completes. mask.bounds = newBounds mask.addAnimation(revealAnimation, forKey: "revealAnimation") } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }