CAShapeLayer动画早于视图更新问题排查求助

嘿，我帮你排查了代码里的问题，主要是几个关键误区导致layer动画和视图动画不同步，咱们一个个说：

核心问题1：对strokeEnd的理解完全错了 #

strokeEnd是基于路径长度的百分比值，范围是0.0到1.0（0代表路径起点，1代表路径终点），但你直接把实际像素高度赋值给它了！比如视图高度是200时，你设置toValue = 200，这远远超出了strokeEnd的有效范围，动画会瞬间跑完，自然比视图动画快很多。

核心问题2：layoutSubviews重复添加动画 #

每次视图布局变化都会触发layoutSubviews，你每次都调用dashedLayer.add(animation, forKey: nil)，会导致多个动画叠加，节奏彻底混乱。

核心问题3：动画的起始值逻辑错误 #

你用height（旧高度）作为fromValue，但它和strokeEnd的百分比逻辑不匹配，动画的起始状态根本不对。

修正后的代码方案 #

1. 调整Layer动画逻辑（适配strokeEnd的百分比规则）

首先在你的线条视图类里加一个变量记录目标状态：

var targetStrokeEnd: CGFloat = 1.0

然后重写layoutSubviews：

override func layoutSubviews() {
    super.layoutSubviews()
    
    let centerX = bounds.midX
    // 重新绘制竖线路径（匹配当前视图高度）
    let path = CGMutablePath()
    path.addLines(between: [CGPoint(x: centerX, y: 0), CGPoint(x: centerX, y: bounds.height)])
    dashedLayer.path = path
    dashedLayer.frame = bounds
    
    // 获取当前屏幕上显示的strokeEnd状态（如果有正在运行的动画，用presentation层的值）
    let currentStrokeEnd = dashedLayer.presentation()?.strokeEnd ?? targetStrokeEnd
    // 目标是让线条填满整个新路径，所以设置为1.0
    targetStrokeEnd = 1.0
    
    // 创建动画，和UIView动画参数对齐
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = currentStrokeEnd
    animation.toValue = targetStrokeEnd
    animation.duration = 0.3
    // 匹配UIView默认的缓动曲线
    animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
    // 动画结束后保持最终状态
    animation.fillMode = .forwards
    animation.isRemovedOnCompletion = false
    
    // 用固定key覆盖旧动画，避免叠加
    dashedLayer.add(animation, forKey: "strokeEndAnimation")
}

2. 同步视图动画的调用逻辑

确保先更新线条视图的布局约束/frame，再在动画块里调用layoutIfNeeded：

// 先更新线条视图的布局参数（比如约束constant或者frame）
self.dividerViewHeightConstraint.constant = newHeight
// 执行UIView动画，和layer动画时长、曲线保持一致
UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInEaseOut, animations: {
    self.view.layoutIfNeeded()
}, completion: nil)

额外注意事项 #

• 确保dashedLayer的strokeColor、lineWidth等基础属性已经正确设置，不然可能看不到动画效果；
• 用dashedLayer.presentation()获取当前动画的实时状态，能避免动画跳变；
• 统一UIView和CALayer动画的时长、缓动曲线，是两者同步的关键。

内容的提问来源于stack exchange，提问作者Mark Darry