2012-06-07 16 views
29

Ich habe diesen Code, um ein CALayer-Element zu animieren.Wie kann ich eine CABasicAnimation für mehrere Eigenschaften erstellen?

CABasicAnimation *makeBiggerAnim=[CABasicAnimation animationWithKeyPath:@"radius"]; 
makeBiggerAnim.duration=0.2; 
makeBiggerAnim.fromValue=[NSNumber numberWithDouble:20.0]; 
makeBiggerAnim.toValue=[NSNumber numberWithDouble:40.0]; 
makeBiggerAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 

Meine Frage ist, jetzt funktioniert alles gut, ich möchte ein anderes Attribut des gleichen Elements zur gleichen Zeit. Ich habe gesehen, dass du additive Animationen und ähnliches machen kannst.

Meine Frage ist:

  • das Additiv die beste/einzige Weg, das zu tun Ist Attribut? (gleichzeitig mehrere Eigenschaften desselben Objekts auf einmal animieren)

Vielen Dank!

+0

Was macht der Radiusschlüsselpfad? Zu welchem ​​Layer fügst du diese Animation hinzu? Ich kenne keine Radius-Eigenschaft auf CA-Layer-Objekten. –

+1

Ich erweiterte die CALayer-Klasse, um ein benutzerdefiniertes Rundobjekt zu erstellen. Es funktioniert großartig dank Ihrer Antworten :) –

Antwort

54

Sie können eine CAAnimationGroup erstellen und die Dauer und Zeitfunktion darauf anpassen. Dann erstellen Sie alle Ihre CABasicAnimations, stellen Sie ihren Wert auf und fügen Sie sie der Animationsgruppe hinzu. Schließlich fügen Sie die Animationsgruppe zu dem Layer hinzu, den Sie animieren.

Hier ein Beispiel:

CABasicAnimation *makeBiggerAnim=[CABasicAnimation animationWithKeyPath:@"cornerRadius"]; 
makeBiggerAnim.fromValue=[NSNumber numberWithDouble:20.0]; 
makeBiggerAnim.toValue=[NSNumber numberWithDouble:40.0]; 

CABasicAnimation *fadeAnim=[CABasicAnimation animationWithKeyPath:@"opacity"]; 
fadeAnim.fromValue=[NSNumber numberWithDouble:1.0]; 
fadeAnim.toValue=[NSNumber numberWithDouble:0.0]; 

CABasicAnimation *rotateAnim=[CABasicAnimation animationWithKeyPath:@"transform.rotation.y"]; 
rotateAnim.fromValue=[NSNumber numberWithDouble:0.0]; 
rotateAnim.toValue=[NSNumber numberWithDouble:M_PI_4]; 

// Customizing the group with duration etc, will apply to all the 
// animations in the group 
CAAnimationGroup *group = [CAAnimationGroup animation]; 
group.duration = 0.2; 
group.repeatCount = 3; 
group.autoreverses = YES; 
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
group.animations = @[makeBiggerAnim, fadeAnim, rotateAnim]; 

[myLayer addAnimation:group forKey:@"allMyAnimations"]; 
+20

Beachten Sie, dass alle Animationen in einer Gruppe Änderungen an der gleichen Ebene vornehmen müssen. Ich habe festgestellt, dass Sie Animationen, die auf verschiedene Ebenen angewendet werden, nicht mit CAAnimationGroup gruppieren können. –

+0

BTW, was macht der Radius Key-Pfad? Zu welchem ​​Layer fügst du diese Animation hinzu? –

+1

@DuncanC Sorry ... Ich habe es aus dem Code des OP genommen. Es sollte wahrscheinlich cornerRadius sein. Außerdem fragt das OP nach, wie man "mehrere Eigenschaften desselben Objekts" animieren kann. –

1

In Swift-3 können wir CAAnimationGroup wie unten verwenden: -

 let position = CAKeyframeAnimation(keyPath: "position") 
     position.values = [ NSValue.init(cgPoint: .zero) , NSValue.init(cgPoint: CGPoint(x: 0, y: -20)) , NSValue.init(cgPoint: .zero) ] 
     position.timingFunctions = [ CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) ] 
     position.isAdditive = true 
     position.duration = 1.2 

     let rotation = CAKeyframeAnimation(keyPath: "transform.rotation") 
     rotation.values = [ 0, 0.14, 0 ] 
     rotation.duration = 1.2 
     rotation.timingFunctions = [ CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) ] 

     let fadeAndScale = CAAnimationGroup() 
     fadeAndScale.animations = [ position, rotation] 
     fadeAndScale.duration = 1 
3
let groupAnimation = CAAnimationGroup() 
groupAnimation.beginTime = CACurrentMediaTime() + 0.5 
groupAnimation.duration = 0.5 


let scaleDown = CABasicAnimation(keyPath: "transform.scale") 
scaleDown.fromValue = 3.5 
scaleDown.toValue = 1.0 
let rotate = CABasicAnimation(keyPath: "transform.rotation") 
rotate.fromValue = .pi/10.0 
rotate.toValue = 0.0 
let fade = CABasicAnimation(keyPath: "opacity") 
fade.fromValue = 0.0 
fade.toValue = 1.0 

groupAnimation.animations = [scaleDown,rotate,fade] 
loginButton.layer.add(groupAnimation, forKey: nil) 

Dies ist für das neueste Update auf schnellen (schnelle 3). Ihr Code sollte ein Objekt am Ende enthalten, d. H. UIButton, UILabel, etwas, das Sie animieren können. In meinem Code war es der loginButton (welcher der Titel oder Name war).

Verwandte Themen