How To Create Google’s Ripple Effect in iOS Application

0
Shares
How To Create Google’s Ripple Effect in iOS Application
4.5 (90%) 2 votes

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

Whether you’re designing 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.rippleeffect1

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

rippleeffect2

Set the project name and detail.

rippleeffect3

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

rippleeffect4

rippleeffect5

For Ripple effect create an extension class RippleButton for UIButton.

rippleeffect6

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.

rippleeffect7

And done!

As you can see, the implementation of ripple effect is pretty simple and straightforward. Now, it’s your turn to create awesome apps with 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.

This page was last edited on May 3rd, 2017, at 18:34.
 
0
Shares
 

Have an iOS App Idea in Mind? Let's Discuss!

Get your free consultation now