Como fazer uma animação nativa de “efeito de pulso” em um UIButton

89

Eu gostaria de ter algum tipo de animação de pulso (loop infinito "escala dentro - escala fora") em um UIButton para chamar a atenção dos usuários imediatamente.

Eu vi este link Como criar um efeito de pulso usando -webkit-animation - anéis externos, mas gostaria de saber se havia alguma maneira de fazer isso usando apenas o framework nativo?

— Johann
fonte

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")

Veja o artigo "Animating Layer Content"

— berílio
fonte

1

Obrigado pela sua resposta! Devo dizer que estou um pouco preso. Não estou familiarizado com o CALayer e não tenho certeza de como vinculá-lo ao meu UIButton. Além disso, seu código parece estar mudando de opacidade, não de escala.

— Johann

8

OK). 'Animação de pulso' é um termo geralmente aplicado ao efeito de cintilação - como dito no exemplo naquele link. Agora reli sua pergunta e entendo o que você quer. No início, cada visualização tem sua própria camada. Se a estrutura QartzCore for adicionada ao projeto, basta digitar myView.layerpara acessá-la. Você pode animar camadas com Core Animation. Para transformação de escala, você pode usar esta abordagem: Suporte de caminho-chave para campos de estrutura

— berílio

7

Fantástico! Usar @ "transform.scale" em vez de @ "opacity" funciona perfeitamente. Muito obrigado!

— Johann

2

Caso ainda não o tenha, você precisa adicionar #import <QuartzCore/QuartzCore.h>para obter todas as definições para CALayers.

— progrmr de

UGH! Não edite respostas com 3 anos de idade que estejam desatualizadas, a menos que você esteja atualizando a resposta real para a versão moderna correta. Adicionar espaços não é atualizá-lo. Principalmente para não ressuscitá-lo após 3 anos.

— Fogmeister

30

Aqui está o código rápido para isso;)

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
fonte

2

O que há com todos os pontos-e-vírgulas? ;)

— Christian

@Christian o ponto e vírgula define o tipo da constante pulseAnimation. Não é necessário usar, mas tende a aumentar a clareza do código quando o lado direito de uma atribuição não torna óbvio o tipo que será atribuído.

— Scott Chow

@ScottChow Acho que você está falando sobre os dois pontos. Meu comentário foi uma piada com a resposta original, já que não há necessidade de ponto-e-vírgula com o Swift. Acho que não era tão óbvio agora, quando a resposta foi muito editada :)

— Christian

9

O código swift está faltando um fromValue, eu tive que adicioná-lo para fazê-lo funcionar.

pulseAnimation.fromValue = NSNumber(float: 0.0)

Também forKeydeve ser definido, caso contrário removeAnimationnão funciona.

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

— Bassebus
fonte

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
fonte

Como fazer uma animação nativa de “efeito de pulso” em um UIButton - iOS