Two CABasicAnimations on Two Different Layers Simultaneously

Question

I have a single animation that animates a layer mask successfully:

// create new animation
let anim = CABasicAnimation(keyPath: "path")
anim.delegate = self
anim.fromValue = self.maskLayerMWB.path
anim.toValue = path2.CGPath
anim.duration = 0.2
anim.timingFunction = CAMediaTimingFunction(controlPoints: 0, 1, 1, 1)
 self.maskLayerMWB.addAnimation(anim, forKey: nil)

CATransaction.begin()
CATransaction.setDisableActions(true)
 self.maskLayerMWB.path = path2.CGPath
CATransaction.commit()

Above works fine. However, right after that, I need to add another CABasicAnimation that gets applied to a different CAShapeLayer.

However, when I add them together as follows, the second animation does not animate, only the first does:

   // create new animation
    let anim = CABasicAnimation(keyPath: "path")
    anim.delegate = self
    anim.fromValue = self.maskLayer.path
    anim.toValue = path2.CGPath
    anim.duration = 0.2
     self.maskLayer.addAnimation(anim, forKey: nil)

   //Create second Animation
    let anim2 = CABasicAnimation(keyPath: "path")
    anim2.delegate = self
    anim2.fromValue = self.shapeLayer.path
    anim2.toValue = path2.CGPath
    anim2.duration = 0.2
     self.shapeLayer.addAnimation(anim2, forKey: nil)

    CATransaction.begin()
    CATransaction.setDisableActions(true)
     self.maskLayer.path = path2.CGPath
     self.shapeLayer.path = path2.CGPath
    CATransaction.commit()

I need both animations to happen simultaneously.

Hello again. Second animation does not animate, it just goes to the final value (shape). — Gizmodo, Oct 31 '16 at 00:24
Delete the begin and commit, and move the three lines they contained to the start. — matt, Oct 31 '16 at 00:26
Shouldn't he delete the `CATransaction.setDisableActions(true) ` as well? — Duncan C, Oct 31 '16 at 00:28
That didn't work :( Now both wouldn't animate..just abruptly change to final value — Gizmodo, Oct 31 '16 at 00:58
What is this `path2` — is it a UIBezierPath? I'll make a demo... — matt, Oct 31 '16 at 01:46
Swift 2.3. Also I am running this inside a timer with 1.0 sec interval. May be sticking with just CATransaction is better? — Gizmodo, Oct 31 '16 at 01:50

score 3 · Answer 1 · answered Oct 31 '16 at 02:02

I was able to fix this by using CATransaction.setCompletionBlock

    CATransaction.begin()
    CATransaction.setDisableActions(true)

    // create new animation
    let anim = CABasicAnimation(keyPath: "path")
    anim.delegate = self
    anim.fromValue = self.maskLayer.path
    anim.toValue = path2.CGPath
    anim.duration = 0.2
     self.maskLayer.addAnimation(anim, forKey: nil)

   //Create second Animation
    let anim2 = CABasicAnimation(keyPath: "path")
    anim2.delegate = self
    anim2.fromValue = self.shapeLayer.path
    anim2.toValue = path2.CGPath
    anim2.duration = 0.2
     self.shapeLayer.addAnimation(anim2, forKey: nil)

    CATransaction.setCompletionBlock({
       self.maskLayer.path = path2.CGPath
       self.shapeLayer.path = path2.CGPath
    })

    CATransaction.commit()

Good enough for me! (Actually the same idea as what I was trying to do, but never mind why.) — matt, Oct 31 '16 at 03:03

Two CABasicAnimations on Two Different Layers Simultaneously

1 Answers1