Create Ripple animation in swift

Posted By : Akhil Dhiman | 12-Jun-2015
In this blog i will tell you how to create ripple animation in swift.For this you need to create a view in storyboard. Add view some specific width for ripple and make sure to give him square shape. Add constraints to view so that view will be aligned properly . Now in your view controller add the following code
In your viewdidload event add the below code:

First create a outlet for view
To create ripple effect you need to make a circular view for that the code is written in setupViewsForRippleEffect() function
@IBOutlet var outerRippleView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
    setupViewsForRippleEffect()
}
    
//make round circles
func setupViewsForRippleEffect(){
    outerRippleView.layer.zPosition = 1111
    self.outerRippleView.layer.cornerRadius = self.outerRippleView.frame.size.width / 2;
    self.outerRippleView.clipsToBounds = true
    self.outerRippleView.layer.borderColor = UIColor(rgb: 0x3B5998).CGColor
    self.outerRippleView.layer.borderWidth = 1.0   
    animateRippleEffect()
}
 
Animation effect for ripple view
Below is the code for ripple animation and this function is to create infinite ripples this is because when the animation completes we are calling the function again and again
 //animate ripple effect
func animateRippleEffect(){
    animationCounter++
    self.outerRippleView.transform = CGAffineTransformMakeScale(0.2, 0.2)
    
    UIView.animateWithDuration(1.5, delay: 0,
        options: UIViewAnimationOptions.CurveLinear,
        animations: {
            self.outerRippleView.transform = CGAffineTransformMakeScale(1.0, 1.0)
        }, completion: { finished in
            self.animateRippleEffect()
    })
}
 

THANKS

About Author

Author Image
Akhil Dhiman

Akhil is an iPhone and Android application developer with experience in PhoneGap and Swift(Native iOS). Akhil has good experience working with JavaScript, jQuery and Underscore as well.

Request for Proposal

Name is required

Comment is required

Sending message..