我是第一次在MacOS应用程序中使用NSBezierPathCAShapeLayerCABasicAnimation。我从this tutorial开始(这是uibezierpath)。
我想,我真的知道它是如何工作的,直到我面对这个奇怪的问题。不管我在做什么,动画总是从下到上填充容器。
我的动画层如下:

import Cocoa

class ArcLayer: CAShapeLayer {
    var animationDuration: CFTimeInterval = 1.0

    init(fillColor: CGColor = Constants.Colors.DARK_THEME_MAIN_DARK.cgColor, animationDuration: CFTimeInterval = 1.0) {
        super.init()

        self.fillColor = fillColor
        self.animationDuration = animationDuration
        path = arcPathPre.cgPath
    }

    required init(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    var arcPathPre: NSBezierPath {
        let arcPath = NSBezierPath()
        arcPath.move(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 1.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 1.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.close()
        return arcPath
    }

    var arcPathStarting: NSBezierPath {
        let arcPath = NSBezierPath()
        arcPath.move(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.2 * 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0.2 * 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.close()
        return arcPath
    }

    var arcPathLow: NSBezierPath {
        let arcPath = NSBezierPath()
        arcPath.move(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.4 * 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0.4 * 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.close()
        return arcPath
    }

    var arcPathMid: NSBezierPath {
        let arcPath = NSBezierPath()
        arcPath.move(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.6 * 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0.6 * 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.close()
        return arcPath
    }

    var arcPathHigh: NSBezierPath {
        let arcPath = NSBezierPath()
        arcPath.move(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.8 * 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0.8 * 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.close()
        return arcPath
    }

    var arcPathComplete: NSBezierPath {
        let arcPath = NSBezierPath()
        arcPath.move(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.line(to: CGPoint(x: 0.0, y: 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 171.0))
        arcPath.line(to: CGPoint(x: 171.0, y: 0))
        arcPath.line(to: CGPoint(x: 0.0, y: 0.0))
        arcPath.close()
        return arcPath
    }

    func animate() {
        let arcAnimationPre: CABasicAnimation = CABasicAnimation(keyPath: "path")
        arcAnimationPre.fromValue = arcPathPre.cgPath
        arcAnimationPre.toValue = arcPathStarting.cgPath
        arcAnimationPre.beginTime = 0.0
        arcAnimationPre.duration = animationDuration

        let arcAnimationLow: CABasicAnimation = CABasicAnimation(keyPath: "path")
        arcAnimationLow.fromValue = arcPathStarting.cgPath
        arcAnimationLow.toValue = arcPathLow.cgPath
        arcAnimationLow.beginTime = arcAnimationPre.beginTime + arcAnimationPre.duration
        arcAnimationLow.duration = animationDuration

        let arcAnimationMid: CABasicAnimation = CABasicAnimation(keyPath: "path")
        arcAnimationMid.fromValue = arcPathLow.cgPath
        arcAnimationMid.toValue = arcPathMid.cgPath
        arcAnimationMid.beginTime = arcAnimationLow.beginTime + arcAnimationLow.duration
        arcAnimationMid.duration = animationDuration

        let arcAnimationHigh: CABasicAnimation = CABasicAnimation(keyPath: "path")
        arcAnimationHigh.fromValue = arcPathMid.cgPath
        arcAnimationHigh.toValue = arcPathHigh.cgPath
        arcAnimationHigh.beginTime = arcAnimationMid.beginTime + arcAnimationMid.duration
        arcAnimationHigh.duration = animationDuration

        let arcAnimationComplete: CABasicAnimation = CABasicAnimation(keyPath: "path")
        arcAnimationComplete.fromValue = arcPathHigh.cgPath
        arcAnimationComplete.toValue = arcPathComplete.cgPath
        arcAnimationComplete.beginTime = arcAnimationHigh.beginTime + arcAnimationHigh.duration
        arcAnimationComplete.duration = animationDuration

        let arcAnimationGroup: CAAnimationGroup = CAAnimationGroup()
        arcAnimationGroup.animations = [arcAnimationPre, arcAnimationLow, arcAnimationMid, arcAnimationHigh, arcAnimationComplete]
        arcAnimationGroup.duration = arcAnimationComplete.beginTime + arcAnimationComplete.duration
        arcAnimationGroup.fillMode = kCAFillModeForwards
        arcAnimationGroup.isRemovedOnCompletion = false
        add(arcAnimationGroup, forKey: nil)
    }
}

我在这个函数中调用它:
func drawArc() {
    let arcLayer = ArcLayer(fillColor: fluidColor.cgColor, animationDuration: 0.75)
    self.layer?.addSublayer(arcLayer)
    arcLayer.animate()
}

视图的宽度和高度正好是171.0。
预期行为:
深色区域(填充颜色)从上到下绘制。
当前行为:
暗区(填充颜色)从下到上绘制。
swift - NSBezierPath引向错误的方向-LMLPHP
我很确定这只是一个非常合乎逻辑的问题,但是,我真的找不到它。
我不认为这是问题所在,但下面是我从nsbezierpath获取CGPath的扩展:
import Cocoa

extension NSBezierPath {

    public var cgPath: CGPath {
        let path = CGMutablePath()
        var points = [CGPoint](repeating: .zero, count: 3)
        for i in 0 ..< self.elementCount {
            let type = self.element(at: i, associatedPoints: &points)
            switch type {
            case .moveToBezierPathElement: path.move(to: CGPoint(x: points[0].x, y: points[0].y))
            case .lineToBezierPathElement: path.addLine(to: CGPoint(x: points[0].x, y: points[0].y))
            case .curveToBezierPathElement: path.addCurve(to: CGPoint(x: points[0].x, y: points[0].y), control1: CGPoint(x: points[1].x, y: points[1].y), control2: CGPoint(x: points[2].x, y: points[2].y))
            case .closePathBezierPathElement: path.closeSubpath()
            }
        }
        return path
    }
}

最佳答案

在我看来,这可能是一个坐标问题,ns的原点在左上角,cg的原点在左下角,也许检查一下?

关于swift - NSBezierPath引向错误的方向,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51487979/

10-10 16:34