Question

我是第一次在macOS应用程序中使用NSBezierPath，CAShapeLayer和CABasicAnimation。我以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。

预期的行为： 深色区域（填充颜色）从顶部到底部绘制。

当前行为： 深色区域（填充颜色）从底部到顶部绘制。

我很确定这只是一个非常合乎逻辑的问题，但是，我确实找不到。

我不认为这是问题所在，但这是我的扩展，可以从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
    }
}

Answer 1

在我看来，这可能是一个坐标问题，NS的原点在左上方，而CG的原点在左下方，也许检查一下？

NSBezierPath绘制方向错误

1 个答案: