Animer sur une partie du chemin UIBezier

Question

J'ai deux UIBezierPath ...

chemin d'abord montre le chemin totale de à destination et en arrière et le second chemin est une copie du premier chemin, mais cette copie doit être un pourcentage du premier chemin que je suis incapable de faire. Fondamentalement, je voudrais que l'avion s'arrête à la partie où le chemin UIBezier vert se termine et ne va pas jusqu'à la couleur verte passée.

Je joins une vidéo en lien qui montrera l'animation que j'essaie d'obtenir. http://cl.ly/302I3O2f0S3Y

également une question similaire posée est Move CALayer via UIBezierPath

Voici le code correspondant

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 
    } 
} 

Answer 1

Votre animation pour voyager un chemin est tout à fait exact. Le seul problème est maintenant que vous définissez le chemin de l'animation de chemin de clé à l'ensemble chemin de Bézier:

animation.path = pathLayer.path 

Si vous voulez que l'animation pour couvrir seulement une partie de ce chemin, vous avez deux choix:

• Fournissez une version plus courte du chemin Bézier, au lieu de pathLayer.path.

• Vous pouvez également placer l'animation entière dans un CAAnimationGroup avec une durée plus courte. Par exemple, si votre animation de trois secondes est enveloppée dans un groupe d'animation de deux secondes, elle s'arrêtera aux deux tiers.