35

I have this code to animate a CALayer element.

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];

My question is, now everything works fine, I would like another attribute of the same element at the same time. I've seen you can do additive animations and stuff.

My question is:

  • Is the additive attribute the best / only way to do that? (animating at once multiple properties of the same object at once )

Thanks!

Improve this question
2
  • What does the radius key path do? What kind of layer are you adding this animation to? I don't know of a radius property on any CA layer objects. Commented Jun 8, 2012 at 20:56
  • 1
    I extended the CALayer class to do a custom round object. It works great thanks to your answers :) Commented Jun 8, 2012 at 22:22

3 Answers 3

Reset to default
71

You can create an CAAnimationGroup and customize the duration and timing function on it. Then you create all your CABasicAnimations, set their to value and add them to the animation group. Finally, you add the animation group to the layer that you are animating.

Here an example:

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"];
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Note that all the animations in a group must make changes to the same layer. I discovered the hard way that you can't group animations applied to different layers with CAAnimationGroup.
BTW, what does the radius key path do? What kind of layer are you adding this animation to?
@DuncanC Sorry... I took it from the code of the OP. It should probably be cornerRadius. Also, the OP is asking for how to animate "multiple properties of the same object"
If you want to achieve some kind of grouping but each animation animates a different layer (CAAnimationGroup doesn't work in this case), use CATransaction instead.
Do we need to set the "group" duration? What if I want each animation to have its own duration?
|
10 
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)

This is for the newest update on swift (swift 3). Your code should include a object at the end, i.e. UIButton, UILabel, something that you can animate. In my code it was the loginButton (which was the title or name).

Improve this answer

Comments

3

In Swift-3 we can use CAAnimationGroup as below :- 

 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
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.