Question

我有两个UIBezierPath ......

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

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

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

以下是相关代码

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

您行进路径的动画完全正确。现在唯一的问题是你正在设置关键路径动画的整个 bezier路径的路径：

animation.path = pathLayer.path

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

提供较短版本的贝塞尔曲线路径，而不是pathLayer.path。
或者，将整个动画包装在持续时间较短的CAAnimationGroup中。例如，如果您的三秒钟动画被包裹在一个两秒钟的动画组中，它将停止三分之二的时间。

动画UIBezier路径的某些部分

1 个答案: