在UIBezier路径的某些部分制作动画

Question

我有两个UIBezierPath ...

第一条路径显示了往返目的地的总路径，第二条路径是第一条路径的副本，但该副本应占我无法执行的第一条路径的百分比。

基本上，我希望飞机停在绿色UIBezier路径结束的部分，而不要等到过去的绿色为止。

我在hte链接中附加了一个视频，该视频将显示我要获取的动画。 http://cl.ly/302I3O2f0S3Y

还问类似的问题是通过UIBezierPath移动CALayer

这是相关的代码

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

您的路径动画非常正确。 现在唯一的问题是，您要将关键路径动画的路径设置为整个贝塞尔曲线路径：

animation.path = pathLayer.path

如果您希望动画仅覆盖该路径的一部分，则有两种选择：

• 提供pathLayer.path路径的较短版本，而不是pathLayer.path 。

• 或者，将整个动画以较短的持续时间包装在CAAnimationGroup中。 例如，如果将三秒钟的动画包装在一个两秒钟的动画组中，它将停止播放过程的三分之二。