条形图（创建为 CALayer）height/bounds 动画

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

你的代码没问题，唯一的问题是layer的anchorPoint。默认的 anchorPoint 设置为 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)

}

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

条形图（创建为 CALayer）height/bounds 动画

Bar (created as a CALayer) height/bounds animation

core-animation

calayer

ios

swift