How can I create an CABasicAnimation for multiple properties?

Question

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!

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. — Duncan C, Jun 08 '12 at 20:56
I extended the CALayer class to do a custom round object. It works great thanks to your answers :) — Mc-, Jun 08 '12 at 22:22

score 69 · Accepted Answer · edited Jun 24 '15 at 14:21

69

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

edited Jun 24 '15 at 14:21

Ilya

5,225
2
25
54

answered Jun 07 '12 at 19:24

David Rönnqvist

54,872
18
158
197

28

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. – Duncan C Jun 08 '12 at 00:19
BTW, what does the radius key path do? What kind of layer are you adding this animation to? – Duncan C Jun 08 '12 at 00:21
1

@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" – David Rönnqvist Jun 08 '12 at 05:13
As far as the radius key path, I should have posted my comment on the OPs' post, not yours. I'm not sure how that code works, since the key path you use to create the animation actually determines which property of the target layer you're animating. – Duncan C Jun 08 '12 at 20:55
2

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. – Scholle Jan 13 '13 at 13:14
they perform all three at the same time, is there a way to make them sequencial? – Van Du Tran Dec 04 '13 at 16:58
@VanDuTran There have been several questions about sequential, chained, *insert random synonym here*, etc. animations on Stack Overflow. You should be able to find them by searching for one of those words. – David Rönnqvist Dec 04 '13 at 21:35
Thanks, i thought this answer was about chained animations why I was asking the question. My mistake. – Van Du Tran Dec 05 '13 at 20:04
5

Do we need to set the "group" duration? What if I want each animation to have its own duration? – Van Du Tran Dec 17 '13 at 16:59
Does anyone know if you have to import ```CoreAnimation``` framework for this to function? – Supertecnoboff Jul 08 '15 at 20:15

score 8 · Answer 2 · answered Feb 24 '17 at 04:46

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

score 3 · Answer 3 · answered Dec 29 '16 at 09:25

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

How can I create an CABasicAnimation for multiple properties?

3 Answers3

Linked