在CABasicAnimation（iOS）中向前跳

Question

I currently have an animation which is used as a progress indicator for a video, works great. However, now we have a feature that allows the user to skip 2.5 seconds forward into the video by tapping it, and thus I am trying to implement the progress indicator animation to skip forward 2.5 seconds into the animation. How would I skip the animation forward 2.5 seconds? I've tried "animationGroup.timeOffset = 2.5" but it doesn't work.

func performProgressIndicatorAnimation(duration: Float64) {
    layer.mask = nil
    layer.speed = 1.0

    self.duration = duration
    let strokeStartAnimation = CABasicAnimation(keyPath: "strokeStart")
    strokeStartAnimation.fromValue = 0
    strokeStartAnimation.toValue = 1
    strokeStartAnimation.duration = duration
    strokeStartAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)

    animationGroup = CAAnimationGroup()
    animationGroup.duration = duration
    animationGroup.animations = [strokeStartAnimation]
    externalCircle.addAnimation(animationGroup, forKey: "animationGroup")

}

//Here is where my externalCircle is drawn:

private func drawCircles() {

    let externalCirclePath = UIBezierPath(roundedRect: CGRectMake(0, 0, bounds.height, bounds.height), cornerRadius: bounds.height / 2)
    externalCircle.path = externalCirclePath.CGPath
    externalCircle.fillColor = UIColor.clearColor().CGColor
    externalCircle.strokeColor = UIColor.whiteColor().CGColor
    externalCircle.lineWidth = 2

    let internalCircleRadius = bounds.size.height / 5
    let internalCirclePath = UIBezierPath(roundedRect: CGRectMake(0, 0, internalCircleRadius * 2, internalCircleRadius * 2), cornerRadius: internalCircleRadius)
    internalCircle.path = internalCirclePath.CGPath
    internalCircle.fillColor = UIColor.whiteColor().CGColor
    internalCircle.position = CGPointMake(CGRectGetMidX(bounds) - internalCircleRadius,
                                          CGRectGetMidY(bounds) - internalCircleRadius);

    layer.addSublayer(internalCircle)
    layer.addSublayer(externalCircle)
}

Answer 1

If you skip a proportion of animation using the timeOffset, it will still play for the same total duration. The animation simply loops around and plays again up until the point where it originally started. Ex: animation : A->B->C. If you use timeOffSet in order to begin at B, it will be : B->C->A

In this circumstance, I think you may dismiss this animation, then add new one.

Answer 2

Did this by removing the previous animation and starting it based on the percentage elapsed (with skip)

func skipProgressIndicatorAnimation(currentTime: CMTime, timeToSkip: Double, duration: CMTime) {

    animationGroup = nil
    externalCircle.removeAllAnimations()

    let percentageElapsedWithSkip = (CMTimeGetSeconds(currentTime) + timeToSkip) / CMTimeGetSeconds(duration)

    let strokeStartAnimation = CABasicAnimation(keyPath: "strokeStart")
    strokeStartAnimation.fromValue = percentageElapsedWithSkip
    strokeStartAnimation.toValue = 1
    strokeStartAnimation.duration = CMTimeGetSeconds(duration) - CMTimeGetSeconds(currentTime) - timeToSkip
    strokeStartAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)

    animationGroup = CAAnimationGroup()
    animationGroup.duration = CMTimeGetSeconds(duration) - CMTimeGetSeconds(currentTime) - timeToSkip
    animationGroup.animations = [strokeStartAnimation]
    externalCircle.addAnimation(animationGroup, forKey: "animationGroup")

}