So erstellen Sie eine native "Pulse-Effekt" -Animation auf einem UIButton

89

Ich hätte gerne eine Art Pulsanimation (Endlosschleife "Scale In - Scale Out") auf einem UIButton, damit die Benutzer sofort darauf aufmerksam werden.

Ich habe diesen Link gesehen. Wie erstelle ich einen Impulseffekt mit -webkit-animation - nach außen, aber ich habe mich gefragt, ob es eine Möglichkeit gibt, dies nur mit nativem Framework zu tun?

— Johann
quelle

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

Schnell

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

Siehe den Artikel "Animieren von Ebeneninhalten"

— Beryllium
quelle

1

Danke für deine Antwort! Ich muss sagen, dass ich ein bisschen festgefahren bin. Ich kenne CALayer überhaupt nicht und bin mir nicht sicher, wie ich es mit meinem UIButton verknüpfen soll. Außerdem sieht Ihr Code so aus, als würde sich die Deckkraft ändern, nicht die Skalierung.

— Johann

8

in Ordnung). "Pulsanimation" ist ein Begriff, der normalerweise für den Flickereffekt verwendet wird - wie im Beispiel in diesem Link angegeben. Jetzt lese ich deine Frage noch einmal und verstehe, was du willst. Zunächst hat jede Ansicht eine eigene Ebene. Wenn dem Projekt ein QartzCore-Framework hinzugefügt wird, geben Sie einfach ein, myView.layerum darauf zuzugreifen. Sie können Ebenen mit Core Animation animieren. Für die Skalentransformation können Sie diesen Ansatz verwenden: Schlüsselpfadunterstützung für Strukturfelder

— Beryllium

7

Fantastisch! Die Verwendung von @ "transform.scale" anstelle von @ "opacity" funktioniert wie ein Zauber. Vielen Dank!

— Johann

2

Wenn Sie es noch nicht haben, müssen Sie es hinzufügen #import <QuartzCore/QuartzCore.h>, um alle Definitionen für CALayers zu erhalten.

— Programm

PFUI! Bearbeiten Sie keine veralteten 3 Jahre alten Antworten, es sei denn, Sie aktualisieren die tatsächliche Antwort auf die richtige moderne Version. Durch das Hinzufügen von Leerzeichen wird es nicht aktualisiert. Vor allem, um es nach 3 Jahren nicht wiederzubeleben.

— Fogmeister

30

Hier ist der schnelle Code dafür;)

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
quelle

2

Was ist mit all den Semikolons los? ;)

— Christian

@Christian Das Semikolon legt den Typ der pulsAnimation-Konstante fest. Die Verwendung ist nicht erforderlich, erhöht jedoch tendenziell die Klarheit des Codes, wenn auf der rechten Seite einer Zuweisung nicht ersichtlich ist, welcher Typ zugewiesen werden soll.

— Scott Chow

@ ScottChow Ich denke, Sie sprechen über den Doppelpunkt. Mein Kommentar war ein Witz zur ursprünglichen Antwort, da bei Swift keine Semikolons erforderlich sind. Ich denke, es war jetzt nicht so offensichtlich, wenn die Antwort viel bearbeitet wurde :)

— Christian

9

Dem schnellen Code fehlt ein fromValue, ich musste ihn hinzufügen, damit er funktioniert.

pulseAnimation.fromValue = NSNumber(float: 0.0)

Sollte forKeyauch eingestellt sein, sonst removeAnimationfunktioniert es nicht.

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

— Bassebus
quelle

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
quelle

So erstellen Sie eine native "Pulse-Effekt" -Animation auf einem UIButton - iOS