How To Create Google’s Ripple Effect in iOS Application

Google’s new material design library has introduced many new interaction effects including ripple effect.

Whether you’re designing a mobile app in Android platform or iOS platform, it’s always good to let your users know that your app has received the input. Now, this could be as little as a color change on button to indicate that the button has been pressed.

Here, in today’s iOS app tutorial, we’ll see how to make ripple effect animation on an object to let users know that app has received the users’ input.

Let’s Get Started

Open your XCode and create a new project under file menu.

Select Single View Application as project type and click on next.

Set the project name and detail.

Once you create a new project, go to Main.storyboard and select ViewController and drop UIButton from “Show the object library” section.

For Ripple effect create an extension class RippleButton for UIButton.

RippleButton.Swift

var circleShape = CALayer()

override func beginTrackingWithTouch(touch: UITouch, withEvent event: UIEvent?) -> Bool {
let width: CGFloat = self.bounds.size.width
let height: CGFloat = self.bounds.size.height
if (self.imageView!.image != nil) {
self.circleShape = self.createImageShapeWithPosition(CGPointMake(width / 2, height / 2), pathRect: CGRectMake(-CGRectGetMidX(self.bounds), -CGRectGetMidY(self.bounds), self.imageView!.image!.size.width, self.imageView!.image!.size.height))
self.circleShape.contents = (self.imageView!.image!.CGImage! as AnyObject)
}
else {
self.circleShape = self.createCircleShapeWithPosition(CGPointMake(width / 2, height / 2), pathRect: CGRectMake(-CGRectGetMidX(self.bounds), -CGRectGetMidY(self.bounds), width, height), radius: self.layer.cornerRadius)
}
self.layer.addSublayer(self.circleShape)
return true
}



override func endTrackingWithTouch(touch: UITouch?, withEvent event: UIEvent?) {
let point = touch!.locationInView(self)
if point.x < 0 || point.y < 0 || point.x > self.bounds.size.width || point.y > self.bounds.size.height {
self.circleShape.removeFromSuperlayer()
}
else {
let scale: CGFloat = 2.5
let groupAnimation = self.createFlashAnimationWithScale(scale, duration: 0.5)
//
//groupAnimation["circleShaperLayer"] = self!.circleShape
groupAnimation.delegate = self
self.circleShape.addAnimation(groupAnimation, forKey: nil)
}
}


func createImageShapeWithPosition(position: CGPoint, pathRect rect: CGRect) -> CALayer {
let imageLayer = CALayer()
imageLayer.bounds = rect
imageLayer.position = position
return imageLayer
}


func createCircleShapeWithPosition(position: CGPoint, pathRect rect: CGRect, radius: CGFloat) -> CAShapeLayer {
let circleShape = CAShapeLayer()
circleShape.path = self.createCirclePathWithRadius(rect, radius: radius)
circleShape.position = position
circleShape.fillColor = UIColor.clearColor().CGColor
circleShape.strokeColor = UIColor.purpleColor().CGColor
circleShape.opacity = 0
circleShape.lineWidth = 1
return circleShape
}


func createFlashAnimationWithScale(scale: CGFloat, duration: CGFloat) -> CAAnimationGroup {
let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
scaleAnimation.fromValue = NSValue(CATransform3D: CATransform3DIdentity)
scaleAnimation.toValue = NSValue(CATransform3D: CATransform3DMakeScale(scale, scale, 1))
let alphaAnimation = CABasicAnimation(keyPath: "opacity")
alphaAnimation.fromValue = 1
alphaAnimation.toValue = 0
let animation = CAAnimationGroup()
animation.animations = [scaleAnimation, alphaAnimation]
animation.duration = 1.0
return animation
}


func createCirclePathWithRadius(frame: CGRect, radius: CGFloat) -> CGPathRef {
return UIBezierPath(roundedRect: frame, cornerRadius: radius).CGPath
}


override func animationDidStop(anim: CAAnimation, finished flag: Bool) {

}

Now select UIButton and go to the identity inspector and set the class RippleButton.

And done!

As you can see, the implementation of ripple effect is pretty simple and straightforward. Now, it’s your turn to create or upgrade apps with material design and amazing UI. Although, there are many UI widgets to discover, and it’s better that you consult iPhone app development company if you’re implementing directly into a live app.

You may also like, How to Build Robust UI Using Android Imageview Design Widget?