90 votes

Comment créer une animation native "effet d'impulsion" sur un bouton UIB - iOS

Je voudrais avoir une sorte d'animation pulsée (boucle infinie "scale in - scale out") sur un UIButton pour qu'il attire immédiatement l'attention des utilisateurs.

J'ai vu ce lien Comment créer un effet d'impulsion en utilisant -webkit-animation - anneaux extérieurs mais je me demandais s'il y avait un moyen de faire cela uniquement en utilisant le framework natif ?

201voto

beryllium Points 18138
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

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

Voir l'article "Animer le contenu des couches".

1 votes

Merci pour votre réponse ! Je dois dire que je suis un peu coincé. Je ne connais pas du tout CALayer et je ne sais pas comment le relier à mon UIButton. De plus, votre code semble modifier l'opacité et non l'échelle.

8 votes

D'accord). L'animation par impulsion est un terme généralement appliqué à l'effet de scintillement, comme indiqué dans l'exemple de ce lien. Maintenant, je relis votre question et je comprends ce que vous voulez. Au début, chaque vue a sa propre couche. Si le framework QartzCore est ajouté au projet, il suffit de taper myView.layer pour y accéder. Vous pouvez animer les couches avec Core Animation. Pour la transformation d'échelle, vous pouvez utiliser cette approche : Prise en charge des chemins de clés pour les champs de structure

7 votes

Fantastique ! L'utilisation de @"transform.scale" au lieu de @"opacity" fonctionne à merveille. Merci beaucoup !

32voto

Ravi Sharma Points 588

Voici le code swift pour cela ;)

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

10voto

Bassebus Points 167

Il manque au code swift un fromValue J'ai dû l'ajouter pour qu'il fonctionne.

pulseAnimation.fromValue = NSNumber(value: 0.0)

Aussi forKey doit être défini, sinon removeAnimation ne fonctionne pas.

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

4voto

Ahmad ELkhwaga Points 41
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)
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X