Search code examples
swiftcalayercaanimationios-animationscamediatiming

Confused with layer freezing


I created layer animation group (CAAnimation group).

group.animations = [
        anim1(customUnderlyingLayer: customUnderlyingLayer, semiEllipse: semiEllipse, duration: 0.1,timingCurve: CAMediaTimingFunction(controlPoints: 0, 1.64, 1, 1)),
        anim2(customUnderlyingLayer: customUnderlyingLayer, semiEllipse: semiEllipse, duration: 0.1,timingCurve: LINEAR),
        anim3(customUnderlyingLayer: customUnderlyingLayer, semiEllipse: semiEllipse, duration: 0.1,timingCurve: LINEAR)
         ]
    group.duration = 1

func anim1(customUnderlyingLayer: CustomUnderlyingLayer, semiEllipse: CAShapeLayer,duration: CFTimeInterval,timingCurve :CAMediaTimingFunction ) -> CABasicAnimation {
    // capture the start and end values
    let startValue = customUnderlyingLayer.path1().cgPath
    let endValue = customUnderlyingLayer.path2().cgPath
    
    semiEllipse.path = endValue
    // construct the explicit animation
    let anim = CABasicAnimation(keyPath:#keyPath(CAShapeLayer.path))
    anim.duration = duration
    anim.beginTime = 0
    anim.timingFunction = timingCurve
    anim.fromValue = startValue
    anim.toValue = endValue
    //semiEllipse.add(anim, forKey: nil)
    return anim
}

func anim2(customUnderlyingLayer: CustomUnderlyingLayer, semiEllipse: CAShapeLayer, duration: CFTimeInterval, timingCurve: CAMediaTimingFunction) -> CABasicAnimation{
    // capture the start and end values
    let startValue = customUnderlyingLayer.path2().cgPath
    let endValue = customUnderlyingLayer.path3().cgPath

    semiEllipse.path = endValue
    // construct the explicit animation
    let anim = CABasicAnimation(keyPath:#keyPath(CAShapeLayer.path))
    anim.duration = duration
     let timingCurve = timingCurve
    anim.timingFunction = timingCurve
    anim.fromValue = startValue
    anim.toValue = endValue
    //semiEllipse.add(anim, forKey: nil)
    return anim
}
  func anim3(customUnderlyingLayer: CustomUnderlyingLayer, semiEllipse: CAShapeLayer, duration: CFTimeInterval, timingCurve: CAMediaTimingFunction) -> CABasicAnimation{
    // capture the start and end values
    let startValue = customUnderlyingLayer.path3().cgPath
    let endValue = customUnderlyingLayer.path4().cgPath

  //  semiEllipse.path = endValue
    // construct the explicit animation
    let anim = CABasicAnimation(keyPath:#keyPath(CAShapeLayer.path))
    anim.duration = duration
     let timingCurve = timingCurve
    anim.timingFunction = timingCurve
    anim.fromValue = startValue
    anim.toValue = endValue
    //semiEllipse.add(anim, forKey: nil)
    return anim
}

Then i set layers timer offset and speed to 0.

semiEllipse.speed = 0
semiEllipse.timeOffset = 0

Added animation group to a calayer.

 semiEllipse.add(group, forKey: "key")

Then i set the initial timeOffset

   delay(0) {
        self.semiEllipse.timeOffset = 1
    }

My problem is:

  • when i put inside group.animations property 2 animations (anim1 and anim2), then everything works fine. When i change timeOffset value by scrolling view animation group changes from anim1 start value to anim2 endValue. But when i put anim3 and carry out same manipulations with timeOffset property by scrolling view, then animation group goes change path from anim2 startValue to anim3 endValue. Why not from anim1 startValue???

Solution

  • in CAAnimationGroup.animations in each CAAnimation there i must specify beginTime value. Then it works.