Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I create an CABasicAnimation for multiple properties?

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!

like image 423
Mc- Avatar asked Jun 07 '12 19:06

Mc-


People also ask

How do I animate a single value in cabasicanimation?

You create an instance of CABasicAnimation using the inherited init(keyPath:) method, specifying the key path of the property to be animated in the render tree. For example, you can animate a layer's scalar (i.e. containing a single value) properties such as its opacity.

What is cabasicanimation object?

An object that provides basic, single-keyframe animation capabilities for a layer property. You create an instance of CABasicAnimation using the inherited init (keyPath:) method, specifying the key path of the property to be animated in the render tree.

How does the animation created in listings 3 and 4 work?

The animation created in Listing 3 moves a layer from (0, 0) to (100, 100). The keyPath can access the individual components of a property. For example, the Listing 4 stretches a layer by animating its transform object's x from 1 to 2.

How to animate scalar and non-scalar properties?

For example, you can animate a layer's scalar (i.e. containing a single value) properties such as its opacity. Listing 1 fades in a layer by animating its opacity from 0 to 1. Non-scalar properties, such as backgroundColor, can also be animated.


3 Answers

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"];
like image 86
David Rönnqvist Avatar answered Oct 14 '22 01:10

David Rönnqvist


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

like image 25
Aaron Zheng Avatar answered Oct 14 '22 01:10

Aaron Zheng


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
like image 3
Shrawan Avatar answered Oct 14 '22 02:10

Shrawan