ios – how to do a native "Pulse effect" animation on a UIButton

| | August 11, 2015

I would like to have some kind of pulse animation (infinite loop “scale in – scale out”) on a UIButton so it gets users’ attention immediately.

I saw this link How to create a pulse effect using -web-kit animation – outward rings but I was wondering if there was any way to do this only using native framework?

Any help much appreciated – code sample even better ;-)

3 Responses to “ios – how to do a native "Pulse effect" animation on a UIButton”

  1. The swift code is missing a “fromValue”, I had to add it in order to get it working.

    pulseAnimation.fromValue = NSNumber(float: 0.0)
    

    Also “forKey” should be set, else removeAnimation doesn’t work.

    self.view.layer.addAnimation(pulseAnimation, forKey: "layerAnimation")
    
  2. CABasicAnimation *theAnimation;
    
    theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];
    theAnimation.duration=1.0;
    theAnimation.repeatCount=HUGE_VALF;
    theAnimation.autoreverses=YES;
    theAnimation.fromValue=[NSNumber numberWithFloat:1.0];
    theAnimation.toValue=[NSNumber numberWithFloat:0.0];
    [theLayer addAnimation:theAnimation forKey:@"animateOpacity"]; //myButton.layer instead of
    

    Swift

    var pulseAnimation:CABasicAnimation = CABasicAnimation(keyPath: "opacity");
        pulseAnimation.duration = 30.0;
        pulseAnimation.toValue = NSNumber(float: 1.0);
        pulseAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut);
        pulseAnimation.autoreverses = true;
        pulseAnimation.repeatCount = FLT_MAX;
        self.view.layer.addAnimation(pulseAnimation, forKey: nil)
    

    See this article

  3. Here is the swift code for it ;)

    var pulseAnimation:CABasicAnimation = CABasicAnimation(keyPath: "transform.scale");
        pulseAnimation.duration = 30.0;
        pulseAnimation.toValue = NSNumber(float: 1.0);
        pulseAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut);
        pulseAnimation.autoreverses = true;
        pulseAnimation.repeatCount = FLT_MAX;
        self.view.layer.addAnimation(pulseAnimation, forKey: nil)
    

Leave a Reply