<分区>
我创建了一个包含条形图的图表 (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 设置动画，但同样没有成功。
这是动画的样子:
如何使条形从底部向顶部增加，而不是从它们高度的中间增加？我将不胜感激任何建议。