Animating on some part of UIBezier path

Question

I have two UIBezierPath...

First path shows the total path from to and fro destination and the second path is a copy of the first path but that copy should be a percentage of the first path which I am unable to do.

Basically I would like the plane to stop at the part where green UIBezier path ends and not go until the past green color.

I am attaching a video in hte link that will show the animation I am trying to get. http://cl.ly/302I3O2f0S3Y

Also a similar question asked is Move CALayer via UIBezierPath

Here is the relevant code

override func viewDidLoad() {

    super.viewDidLoad()


    let endPoint = CGPointMake(fullFlightLine.frame.origin.x + fullFlightLine.frame.size.width, fullFlightLine.frame.origin.y + 100)

    self.layer = CALayer()
    self.layer.contents = UIImage(named: "Plane")?.CGImage
    self.layer.frame = CGRectMake(fullFlightLine.frame.origin.x - 10, fullFlightLine.frame.origin.y + 10, 120, 120)

    self.path = UIBezierPath()
    self.path.moveToPoint(CGPointMake(fullFlightLine.frame.origin.x, fullFlightLine.frame.origin.y + fullFlightLine.frame.size.height/4))
    self.path.addQuadCurveToPoint(endPoint, controlPoint:CGPointMake(self.view.bounds.size.width/2, -200))

    self.animationPath = self.path.copy() as! UIBezierPath

    let w = (viewModel?.completePercentage) as CGFloat!
//        let animationRectangle = UIBezierPath(rect: CGRectMake(fullFlightLine.frame.origin.x-20, fullFlightLine.frame.origin.y-270, fullFlightLine.frame.size.width*w, fullFlightLine.frame.size.height-20))
//        let currentContext = UIGraphicsGetCurrentContext()
//        CGContextSaveGState(currentContext)
//        self.animationPath.appendPath(animationRectangle)
//        self.animationPath.addClip()
//        CGContextRestoreGState(currentContext)

    self.shapeLayer = CAShapeLayer()
    self.shapeLayer.path = path.CGPath
    self.shapeLayer.strokeColor = UIColor.redColor().CGColor
    self.shapeLayer.fillColor = UIColor.clearColor().CGColor
    self.shapeLayer.lineWidth = 10

    self.animationLayer = CAShapeLayer()
    self.animationLayer.path = animationPath.CGPath
    self.animationLayer.strokeColor = UIColor.greenColor().CGColor
    self.animationLayer.strokeEnd = w
    self.animationLayer.fillColor = UIColor.clearColor().CGColor
    self.animationLayer.lineWidth = 3

    fullFlightLine.layer.addSublayer(shapeLayer)
    fullFlightLine.layer.addSublayer(animationLayer)
    fullFlightLine.layer.addSublayer(self.layer)

}

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    updateAnimationForPath(self.animationLayer)
}

func updateAnimationForPath(pathLayer : CAShapeLayer) {

    let animation : CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")
    animation.path = pathLayer.path
    animation.calculationMode = kCAAnimationPaced
    animation.delegate = self
    animation.duration = 3.0
    self.layer.addAnimation(animation, forKey: "bezierPathAnimation")
}

}

extension Int {
    var degreesToRadians : CGFloat {
        return CGFloat(self) * CGFloat(M_PI) / 180.0
    }
}

score 1 · Accepted Answer · answered Dec 03 '15 at 00:59

1

Your animation for traveling a path is exactly right. The only problem now is that you are setting the key path animation's path to the whole bezier path:

animation.path = pathLayer.path

If you want the animation to cover only part of that path, you have two choices:

Supply a shorter version of the bezier path, instead of pathLayer.path.
Alternatively, wrap the whole animation in a CAAnimationGroup with a shorter duration. For example, if your three-second animation is wrapped inside a two-second animation group, it will stop two-thirds of the way through.

answered Dec 03 '15 at 00:59

matt

515,959
87
875
1,141

My question is, is there a way to clip the whole bezier path? FYI, I really like your second suggestion, but I wanted to know if there is a way to clip the paths that we have already drawn? – Sana Dec 03 '15 at 01:01
I used matt's second approach. – Sana Dec 03 '15 at 01:14
Once you've drawn, there is no path any more - just bits in a drawing. You would need to make a new, shorter version of the path. – matt Dec 03 '15 at 01:14

Animating on some part of UIBezier path

1 Answers1