条形图（创建为 CALayer）高度/边界动画 [重复]

Question

我创建了一个包含条形图的图表 (CALayer)。它们的顶部和底部都有一个文本 (CATextLayer)。现在我想给条添加一些动画（使它们从下到上增加）。

这是我现在的代码（此方法创建条形并将其添加到主层 (mainLayer)）：

 private func drawBar(xPos: CGFloat, yPos: CGFloat, color: UIColor? = .gray) {
    let initialBound = CGRect(x: xPos, y: mainLayer.frame.height - bottomSpace, width: barWidth, height: 0)
    let finalBound = CGRect(x: xPos, y: yPos, width: barWidth, height: mainLayer.frame.height - bottomSpace - yPos)
    let increaseBar = CABasicAnimation(keyPath: "bounds")
    increaseBar.fromValue = initialBound
    increaseBar.toValue = finalBound
    increaseBar.duration = 2.0

    let barLayer = CALayer()

    barLayer.frame = finalBound
    barLayer.cornerRadius = 20
    barLayer.backgroundColor = color?.cgColor
    barLayer.add(increaseBar, forKey: nil)
    mainLayer.addSublayer(barLayer)
}

以下是使用的属性：

  //Width of each bar
let barWidth: CGFloat = 40.0

//Space between each bar
let space: CGFloat = 20.0


//Space at the bottom of the bar to show the title
private let bottomSpace: CGFloat = 40.0

//Space at the top of each bar to show the value
private let topSpace: CGFloat = 40.0

xPos 和 yPos 以这种方式找到（index 只是一个 Int，它在 for in 循环中从零增加到条目数，在这种情况下，它等于1):

      /// Starting x postion of the bar
     let xPos: CGFloat = space + CGFloat(index) * (barWidth + space)

    /// Starting y postion of the bar
    let yPos: CGFloat = translateHeightValueToYPosition(value: entry.height)

entry.height 只是0.0 和1.0 之间的任意数字。下面是translateHeightValueToYPosition(value:)方法的定义：

 private func translateHeightValueToYPosition(value: Float) -> CGFloat {

    let height: CGFloat = CGFloat(value) * (mainLayer.frame.height - bottomSpace - topSpace)
    return mainLayer.frame.height - bottomSpace - height
}

现在，除了条形动画从其总高度的中间开始之外，一切正常。我试图（手动）更改yPos 的值，但没有成功。我还尝试通过最初将其设置为 0 来为栏的 height 设置动画，但同样没有成功。

下面是动画的样子：

如何使条形从底部向顶部增加，而不是从中间高度增加？如有任何建议，我将不胜感激。

Answer 1

您的代码很好，唯一的问题是图层的锚点。默认锚点设置为中间的 CGPoint(x: 0.5, y: 0.5)。所以你只需要改变它们。

对于顶部：CGPoint.zero

对于底部：CGPoint(x: 1, y: 1)

以下是仅用于更正的正确代码：

private func drawBar(xPos: CGFloat, yPos: CGFloat, color: UIColor? = .gray) {
let initialBound = CGRect(x: xPos, y: mainLayer.frame.height - bottomSpace, width: barWidth, height: 0)
let finalBound = CGRect(x: xPos, y: yPos, width: barWidth, height: mainLayer.frame.height - bottomSpace - yPos)
let increaseBar = CABasicAnimation(keyPath: "bounds")
increaseBar.fromValue = initialBound
increaseBar.toValue = finalBound
increaseBar.duration = 2.0

let barLayer = CALayer()
// my code line
barLayer.anchorPoint = CGPoint(x: 1, y: 1)
barLayer.frame = finalBound
barLayer.cornerRadius = 20
barLayer.backgroundColor = color?.cgColor
barLayer.add(increaseBar, forKey: nil)
mainLayer.addSublayer(barLayer)

}

希望我的回答能解决您的问题。 :)