如何为图表中CALayer柱状条实现从下往上的高度增长动画？

要实现柱状条从底部向上生长的动画，关键是调整图层的**锚点（anchorPoint）**并配合CABasicAnimation来动画图层高度。下面是修改后的完整代码，我会一步步拆解核心要点：

private func drawBar(xPos: CGFloat, yPos: CGFloat, color: UIColor? = .gray) {
    // 1. 定义初始与最终边界
    let bottomY = mainLayer.frame.height - bottomSpace
    let initialBound = CGRect(x: 0, y: 0, width: barWidth, height: 0)
    // 替换成你实际的最终高度计算逻辑，这里假设yPos是柱状条顶部的y坐标
    let finalHeight = bottomY - yPos
    let finalBound = CGRect(x: 0, y: 0, width: barWidth, height: finalHeight)
    
    // 2. 创建柱状条图层
    let barLayer = CALayer()
    barLayer.bounds = initialBound
    // 核心：把锚点设为底部中心，这样高度变化时只会向上扩展
    barLayer.anchorPoint = CGPoint(x: 0.5, y: 1.0)
    // 位置对应父图层中柱状条底部的中心坐标
    barLayer.position = CGPoint(x: xPos + barWidth/2, y: bottomY)
    barLayer.backgroundColor = color?.cgColor
    
    // 3. 添加到主图层
    mainLayer.addSublayer(barLayer)
    
    // 4. 创建增长动画
    let heightAnimation = CABasicAnimation(keyPath: "bounds.size.height")
    heightAnimation.fromValue = 0
    heightAnimation.toValue = finalHeight
    heightAnimation.duration = 0.8 // 可根据需求调整动画时长
    heightAnimation.timingFunction = CAMediaTimingFunction(name: .easeOut) // 带缓动的自然效果
    // 确保动画结束后保持最终状态，不会跳回初始高度
    heightAnimation.fillMode = .forwards
    heightAnimation.isRemovedOnCompletion = false
    
    // 5. 给柱状条添加动画
    barLayer.add(heightAnimation, forKey: "barGrowthAnimation")
}

关键细节说明： #

• 锚点调整：默认CALayer的锚点是(0.5, 0.5)（图层中心），直接动画高度会让图层向上下同时扩展。改成(0.5, 1.0)（底部中心）后，高度增加时图层只会向上延伸，完美匹配"从下往上增长"的需求。
• 位置适配：锚点改变后，position对应的是锚点在父图层的坐标，所以我们把位置设为柱状条底部的中心，确保初始高度为0时图层处于正确的底部位置。
• 动画稳定性：选择动画bounds.size.height而非frame，是因为frame由bounds、position和transform共同决定，直接操作bounds更可控、不易出问题。
• 状态持久化：fillMode = .forwards和isRemovedOnCompletion = false这两个属性搭配，能让动画结束后图层保持最终的高度状态，不会瞬间跳回初始值。

如果上下的CATextLayer需要和柱状条联动（比如顶部文本随柱状条上升），可以给文本层添加对应的位置动画，逻辑和柱状条类似——根据最终高度计算文本的目标位置即可。

内容的提问来源于stack exchange，提问作者Tigran Iskandaryan