ios - 对 UIBezierpath 的某些部分进行动画处理

Question

我有两个 UIBezierPath...

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

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

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

还有一个类似的问题是 Move CALayer via UIBezierPath

这里是相关代码

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。

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