为什么我的CAShapeLayer没有使用UIView（w / gif）正确动画？

Question

好的，这就是它的发展方式。

灰色区域是UIView，并用CAShapeLayer掩盖它。我添加了两个UIBezierPath并使用Even Odd Rule删除了该灰色区域的一部分。这就是为什么它显示一条线，好像它在左边展示了一个半圆。

红色背景只是容器视图。

现在我的问题是，当我为UIView设置动画时，就好像使用动画UIView无法正确更新蒙版。

这是UIView动画部分：

func didCompleteItem() {
    self.bar.plainProgressBarLeftAnchor?.constant = self.bar.bounds.width * (self.completedItemCount*self.barMeterMultiplier) / self.bar.bounds.width - self.bar.meterCornerRadius
    UIView.animate(withDuration: 1.0, delay: 0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
        self.bar.layoutIfNeeded()

    }, completion: nil)
}

现在，如果您需要了解layoutSubviews是如何创建的，那么这是CAShapeLayer部分。

override func layoutSubviews() {
    super.layoutSubviews()

    backgroundColor = GradientColor(.leftToRight, frame: self.bounds, colors: GradientFlatRed())
    layer.masksToBounds = true
    layer.cornerRadius = meterCornerRadius

    createMask()

}

var shapeLayer: CAShapeLayer = CAShapeLayer()
func createMask() {
    let bPath = UIBezierPath(roundedRect: plainProgressBar.bounds, byRoundingCorners: [.topRight, .bottomRight], cornerRadii: CGSize(width: 0, height: 0))
    let semiCircle = UIBezierPath(arcCenter: CGPoint(x: bounds.origin.x, y: plainProgressBar.bounds.origin.y+meterCornerRadius), radius: meterCornerRadius, startAngle: 3 * CGFloat.pi / 2, endAngle: CGFloat.pi / 2, clockwise: true)
    shapeLayer.frame = layer.bounds
    bPath.append(semiCircle)
    shapeLayer.path = bPath.cgPath
    shapeLayer.fillRule = kCAFillRuleEvenOdd
    plainProgressBar.layer.mask = shapeLayer
}

Answer 1

绘制一个可伸缩的圆圈并更改描绘圆圈的图像视图的宽度，可以为您提供所需的效果，几乎没有任何努力，也没有您遇到的任何工件：