animating multiple CALayers, but not in the same time space

Question

I have several CALayers that I'm trying to animate to a new zPosition with each layer slightly delayed from the others.

Each animation should take 0.25 seconds and start 0.05 seconds after the previous animation started. At the end of each animation the layer will be removed from the layer tree.

I've successfully been using the -animationDidStop:finished: delegate method to remove my layers as they finish but I've not been able to order the animations properly.

Is it possible to schedule animations in this way, and how?

score 18 · Accepted Answer · answered Feb 19 '09 at 00:28

I'd still like to hear others suggestions but I think I've solved this.

I'm now creating specific CAAnimation objects and specifying their beginTime property. I was doing this earlier and it wasn't working, what I finally realized is that for the beginTime property to be honored the animation has to be added to an CAAnimationGroup.

So, my code looks like this:

NSArray *layers = /* layers to be animated away */
CGFloat startOffset = 0.01;

for (NSInteger index = 0; index < layers.count; index++) {
    CALayer *layer = [layers objectAtIndex:index];

    CABasicAnimation *zoomOut = [CABasicAnimation animationWithKeyPath:@"zPosition"];
    zoomOut.toValue = [NSNumber numberWithDouble:400.0];
    zoomOut.beginTime = index * startOffset;

    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = [NSArray arrayWithObject:zoomOut];
    group.delegate = self;

    [layer addAnimation:group forKey:@"zoomAway"];
}

I have also been looking high and low for an answer to this, and tried various different things. I thought it would be possible to create one shared CAAnimationGroup that all of the layers could share as a reference time frame, but that obviously doesn't work. I now think this is probably the way to go about it, but would also love to hear from others with more insight into this. — Felixyz, Jun 16 '09 at 20:45

score 14 · Answer 2 · answered May 07 '12 at 09:01

14

I have found that the BeginTime property does indeed work without putting the animations into a group if you base it's value as a delta from the value returned by QuartzCore's CACurrentMediaTime() function.

e.g. anim.beginTime = CACurrentMediaTime() + 0.05;

answered May 07 '12 at 09:01

kkahl

415
5
17

cool. I don't remember trying that when I did this originally. – Ashley Clark May 28 '12 at 19:00

score 5 · Answer 3 · answered Mar 06 '14 at 18:29

I wish I had the rep to comment, but the reason that setting anim.beginTime to CACurrentMediaTime() works is revealed by some other docs:

AVCoreAnimationBeginTimeAtZero Use this constant to set the CoreAnimation's animation beginTime property to be time 0. The constant is a small, non-zero, positive value which prevents CoreAnimation from replacing 0.0 with CACurrentMediaTime. Available in iOS 4.0 and later. Declared in AVAnimation.h.

So the normal setting of beginTime to 0 is shorthand for setting it to CACurrentMediaTime(). So you can use the to stagger the start of various groups.

"So the normal setting of beginTime to 0 is shorthand for setting it to CACurrentMediaTime()", wow, have been looking all over for this explanation, thanks alot. — langtutheky, Mar 17 '17 at 18:34

Rob Norback · Answer 4 · 2017-07-30T19:46:05.480

Swift 3

Turns out you can do this relatively simply by doing the following:

var timeOffset:Double = 0 
let delay:Double = 0.1
for layer in layers {
    let a = CABasicAnimation(keyPath: "path"
    a.fromValue = layer.ovalPathSmall.cgPath
    a.toValue = layer.ovalPathLarge.cgPath
    a.fillMode = kCAFillModeForwards
    a.beginTime = CACurrentMediaTime() + timeOffset
    a.duration = 0.3
    a.isRemovedOnCompletion = true
    layer.add(a, forKey: nil)

    timeOffset += 0.3 + delay
}

All the layers are CALayer or CAShapeLayer, and in case you're wondering what ovalPathSmall and ovalPathLarge are:

ovalPathSmall = UIBezierPath(arcCenter: position, radius: smallRadius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)
ovalPathLarge = UIBezierPath(arcCenter: position, radius: largeRadius, startAngle: 0, endAngle: 2 * .pi, clockwise: true)

score 0 · Answer 5 · answered Jul 02 '10 at 17:41

Thanks for sharing your results, I also found out that the BeginTime property does not work if used without a group.

In my case, some of the settings like BeginTime and Duration were ignored if set on the CABasicAnimation, but worked if set directly CAAnimationGroup.

animating multiple CALayers, but not in the same time space

5 Answers5

Linked