UIView下划线左至右动画异常问题排查

你的下划线动画出现起点偏移、超出边界的问题，核心原因有两个：

1. 约束设置错误：原代码中trailing约束的constant设为hMargins，这会让下划线的右边缘超出父视图右边界hMargins距离，直接导致边界溢出。
2. Transform动画逻辑顺序错误：先给视图设置了scaleX:0的变形，再修改layer.anchorPoint，这会打乱视图的位置计算——锚点改变会影响视图的position，后续手动调整position又没基于AutoLayout布局后的正确frame，最终导致动画起点跑偏到父视图中间。

推荐两种修复方式，优先选择方案二（完全贴合AutoLayout逻辑，更稳定）：

方案一：修正Transform动画的锚点与顺序 #

调整动画代码的执行顺序，先设置锚点再应用初始缩放，同时修正约束错误：

extension UIView {
    func highlightView(
        color: UIColor? = UIColor.clear,
        hMargins: CGFloat = 0,
        bottomMarging: CGFloat = 0,
        underlineSize: CGFloat = 2,
        isAnimated: Bool = false,
        duration: TimeInterval = .zero) {
            
            // 移除旧下划线
            self.subviews
                .first { $0.tag == TabBar.underlineTag }?
                .removeFromSuperview()
            
            let border = UIView()
            border.tag = TabBar.underlineTag
            border.backgroundColor = color
            border.translatesAutoresizingMaskIntoConstraints = false
            self.addSubview(border)
            
            // 修正约束：trailing的constant改为-hMargins，避免超出边界
            NSLayoutConstraint.activate([
                border.heightAnchor.constraint(equalToConstant: underlineSize),
                border.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: bottomMarging),
                border.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: hMargins),
                border.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -hMargins)
            ])
            self.layoutIfNeeded()
            
            if isAnimated {
                // 先设置锚点到左中点，确保动画从左侧开始
                border.layer.anchorPoint = CGPoint(x: 0, y: 0.5)
                // 锚点改变后，重新定位视图位置，避免偏移
                border.layer.position = CGPoint(
                    x: border.bounds.minX + border.layer.bounds.width * border.layer.anchorPoint.x,
                    y: border.bounds.minY + border.layer.bounds.height * border.layer.anchorPoint.y
                )
                // 初始状态缩放到宽度为0
                border.transform = CGAffineTransform(scaleX: 0, y: 1)
                
                // 执行展开动画
                UIView.animate(
                    withDuration: duration,
                    delay: .zero,
                    options: [.curveEaseInOut],
                    animations: {
                        border.transform = .identity
                    })
            }
        }
}

方案二：使用AutoLayout约束动画（更稳定） #

放弃transform，改用宽度约束的动画，完全遵循AutoLayout逻辑，彻底避免坐标计算错误：

extension UIView {
    func highlightView(
        color: UIColor? = UIColor.clear,
        hMargins: CGFloat = 0,
        bottomMarging: CGFloat = 0,
        underlineSize: CGFloat = 2,
        isAnimated: Bool = false,
        duration: TimeInterval = .zero) {
            
            // 移除旧下划线
            self.subviews
                .first { $0.tag == TabBar.underlineTag }?
                .removeFromSuperview()
            
            let border = UIView()
            border.tag = TabBar.underlineTag
            border.backgroundColor = color
            border.translatesAutoresizingMaskIntoConstraints = false
            self.addSubview(border)
            
            // 基础约束：固定高度、底部位置、左对齐
            let heightConstraint = border.heightAnchor.constraint(equalToConstant: underlineSize)
            let bottomConstraint = border.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: bottomMarging)
            let leadingConstraint = border.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: hMargins)
            // 宽度约束：初始为0，动画时扩展到目标宽度
            let widthConstraint = border.widthAnchor.constraint(equalToConstant: 0)
            
            NSLayoutConstraint.activate([
                heightConstraint,
                bottomConstraint,
                leadingConstraint,
                widthConstraint
            ])
            self.layoutIfNeeded()
            
            if isAnimated {
                // 更新宽度为父视图可用宽度（总宽度 - 左右边距）
                widthConstraint.constant = self.bounds.width - 2 * hMargins
                // 执行约束动画
                UIView.animate(
                    withDuration: duration,
                    delay: .zero,
                    options: [.curveEaseInOut],
                    animations: {
                        self.layoutIfNeeded()
                    })
            } else {
                // 非动画状态直接设置全宽
                widthConstraint.constant = self.bounds.width - 2 * hMargins
                self.layoutIfNeeded()
            }
        }
}

• 修正trailing约束的constant为-hMargins，解决下划线超出父视图边界的问题。
• 使用transform动画时，必须先设置锚点→调整位置→应用初始变形，避免坐标计算混乱。
• 优先选择约束动画，更适配AutoLayout的布局逻辑，减少手动坐标调整带来的错误。

内容的提问来源于stack exchange，提问作者Stephane Boguhe