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!

Ureide

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. – Matri

I extended the CALayer class to do a custom round object. It works great thanks to your answers :) – Ureide

Answer 1

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

Servitude

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. – Matri

BTW, what does the radius key path do? What kind of layer are you adding this animation to? – Matri

@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" – Oxyacid

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. – Matri

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. – Resect

they perform all three at the same time, is there a way to make them sequencial? – Emunctory

@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. – Oxyacid

Thanks, i thought this answer was about chained animations why I was asking the question. My mistake. – Emunctory

Do we need to set the "group" duration? What if I want each animation to have its own duration? – Emunctory

Does anyone know if you have to import CoreAnimation framework for this to function? – Shortcut

Answer 2

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

Platte

Answer 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

Plowboy