Cómo hacer una animación nativa de "efecto de pulso" en un UIButton

89

Me gustaría tener algún tipo de animación de pulso (bucle infinito "escala hacia adentro - escala hacia afuera") en un UIButton para que llame la atención de los usuarios de inmediato.

Vi este enlace Cómo crear un efecto de pulso usando -webkit-animation - anillos externos pero me preguntaba si había alguna forma de hacer esto solo usando un marco nativo.

— Johann
fuente

198

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

Rápido

let pulseAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.opacity))
pulseAnimation.duration = 1
pulseAnimation.fromValue = 0
pulseAnimation.toValue = 1
pulseAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
pulseAnimation.autoreverses = true
pulseAnimation.repeatCount = .greatestFiniteMagnitude
view.layer.add(pulseAnimation, forKey: "animateOpacity")

Consulte el artículo "Animación del contenido de la capa".

— berilio
fuente

1

¡Gracias por tu respuesta! Aunque tengo que decir que estoy un poco estancado. No estoy familiarizado en absoluto con CALayer y no estoy seguro de cómo vincularlo con mi UIButton. Además, parece que su código está cambiando la opacidad, no la escala.

— Johann

8

bueno). 'Animación de pulso' es un término que se aplica generalmente al efecto de parpadeo, como se dice en el ejemplo de ese enlace. Ahora releo tu pregunta y entiendo lo que quieres. Al principio, cada vista tiene su propia capa. Si se agrega el marco QartzCore al proyecto, simplemente escriba myView.layerpara acceder a él. Puede animar capas con Core Animation. Para la transformación de escala, puede utilizar este enfoque: Soporte de ruta clave para campos de estructura

— berilio

7

¡Fantástico! Usar @ "transform.scale" en lugar de @ "opacity" funciona como un encanto. ¡Muchas gracias!

— Johann

2

Si aún no lo tiene, debe agregarlo #import <QuartzCore/QuartzCore.h>para obtener todas las definiciones de CALayers.

— Progrmr

¡UGH! No edite respuestas de hace 3 años que estén desactualizadas a menos que esté actualizando la respuesta real a la versión moderna correcta. Agregar espacios no lo actualiza. Especialmente para no resucitarlo después de 3 años.

— Fogmeister

30

Aquí está el código rápido para ello;)

let pulseAnimation:CABasicAnimation = CABasicAnimation(keyPath: "transform.scale")
pulseAnimation.duration = 1.0
pulseAnimation.toValue = NSNumber(value: 1.0)
pulseAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
pulseAnimation.autoreverses = true
pulseAnimation.repeatCount = .greatestFiniteMagnitude
self.view.layer.add(pulseAnimation, forKey: nil)

— Ravi Sharma
fuente

2

¿Qué pasa con todos los puntos y coma? ;)

— Christian

@Christian el punto y coma establece el tipo de constante pulseAnimation. No es necesario usarlo, pero tiende a aumentar la claridad del código cuando el lado derecho de una asignación no deja en claro qué tipo asignará.

— Scott Chow

@ScottChow Supongo que estás hablando del colon. Mi comentario fue una broma a la respuesta original, ya que no hay necesidad de punto y coma con Swift. Supongo que no era tan obvio ahora que la respuesta se ha editado mucho :)

— Christian

9

Falta el código swift fromValue, tuve que agregarlo para que funcione.

pulseAnimation.fromValue = NSNumber(float: 0.0)

También forKeydebe configurarse, de lo contrario removeAnimationno funciona.

self.view.layer.addAnimation(pulseAnimation, forKey: "layerAnimation")

— Bassebus
fuente

3

func animationScaleEffect(view:UIView,animationTime:Float)
{
    UIView.animateWithDuration(NSTimeInterval(animationTime), animations: {

        view.transform = CGAffineTransformMakeScale(0.6, 0.6)

        },completion:{completion in
            UIView.animateWithDuration(NSTimeInterval(animationTime), animations: { () -> Void in

                view.transform = CGAffineTransformMakeScale(1, 1)
            })
    })

}


@IBOutlet weak var perform: UIButton!

@IBAction func prefo(sender: AnyObject) {
    self.animationScaleEffect(perform, animationTime: 0.7)
}

— Ahmad ELkhwaga
fuente

Cómo hacer una animación nativa de "efecto de pulso" en un UIButton - iOS