如何实现iOS移动渐变边框持续单向无限移动且不重置至初始位置？

嘿，我懂你想要的效果——就是让渐变边框能一直朝着一个方向匀速滚动，跑到头也不会突然跳回起点对吧？看你贴的代码片段，应该是在自定义AnimatedGradientBorderView的时候卡壳了，我来给你一套能直接用的解决方案～

首先得说清为啥普通的渐变动画会“重置”：要是只给渐变层加个从左到右的基础动画，动画结束后系统会把图层切回初始状态；而且如果渐变的首尾颜色不衔接，移动后还会出现断层。所以咱们要解决两个核心问题：让渐变效果无缝衔接，让动画持续循环且不会跳回起点。

下面是完整的AnimatedGradientBorderView实现，直接复制用就行：

import UIKit

class AnimatedGradientBorderView: UIView {
    // 负责渲染渐变效果的图层
    private let gradientLayer = CAGradientLayer()
    // 用来把渐变层裁剪成边框形状的遮罩层
    private let borderMaskLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupBaseLayers()
        startContinuousScrollAnimation()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBaseLayers()
        startContinuousScrollAnimation()
    }
    
    private func setupBaseLayers() {
        // 渐变颜色首尾保持一致，这是实现无缝衔接的关键
        gradientLayer.colors = [
            UIColor.systemBlue.cgColor,
            UIColor.systemPurple.cgColor,
            UIColor.systemBlue.cgColor
        ]
        // 把渐变范围设为视图的2倍宽度，这样平移后刚好能和下一段渐变接上
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 2, y: 0.5)
        gradientLayer.locations = [0, 0.5, 1]
        
        // 遮罩层配置：填充透明、描边白色，这样渐变层只会显示描边的部分（也就是边框）
        borderMaskLayer.fillColor = UIColor.clear.cgColor
        borderMaskLayer.strokeColor = UIColor.white.cgColor
        borderMaskLayer.lineWidth = 2 // 这里可以根据需求调整边框粗细
        
        layer.addSublayer(gradientLayer)
        gradientLayer.mask = borderMaskLayer
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 适配视图大小变化，更新渐变层和遮罩层的范围与路径
        gradientLayer.frame = bounds
        borderMaskLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: layer.cornerRadius).cgPath
    }
    
    private func startContinuousScrollAnimation() {
        // 创建水平平移动画
        let translationAnimation = CABasicAnimation(keyPath: "transform.translation.x")
        translationAnimation.fromValue = 0
        // 移动距离等于视图宽度，刚好让2倍宽的渐变层移动后完美衔接
        translationAnimation.toValue = bounds.width
        translationAnimation.duration = 3 // 这里可以调整动画的快慢
        translationAnimation.repeatCount = .infinity
        translationAnimation.isRemovedOnCompletion = false
        translationAnimation.fillMode = .forwards
        translationAnimation.timingFunction = CAMediaTimingFunction(name: .linear) // 匀速移动更自然
        
        gradientLayer.add(translationAnimation, forKey: "continuousGradientScroll")
    }
}

然后你原来的ViewController代码可以补全约束（你之前的代码里约束没写完哦）：

import UIKit
import SnapKit

class ViewController: UIViewController {
    let animatedBorderView = AnimatedGradientBorderView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        animatedBorderView.layer.cornerRadius = 20
        animatedBorderView.clipsToBounds = true
        view.addSubview(animatedBorderView)
        animatedBorderView.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.size.equalTo(CGSize(width: 200, height: 100)) // 给视图设置固定大小，也可以根据需求调整为自适应
        }
    }
}

再给你划几个关键细节：

• 无缝滚动的核心：渐变层颜色首尾一致，且宽度设为视图的2倍，移动一个视图宽度后，下一段渐变和之前的完全衔接，看起来就像一直在单向移动
• 不重置的关键：动画设置isRemovedOnCompletion = false和fillMode = .forwards，再配合无限重复，因为动画终点刚好衔接起点，所以不会有跳回的突兀感
• 边框实现：用遮罩层把渐变层裁剪成边框形状，比直接给layer加边框更灵活，还能适配圆角

如果想要垂直方向的滚动动画，只需要改这几个地方：

• 把渐变层的startPoint设为CGPoint(x:0.5, y:0)，endPoint设为CGPoint(x:0.5, y:2)
• 动画的keyPath改成"transform.translation.y"，toValue设为bounds.height

备注：内容来源于stack exchange，提问作者sudoExclamationExclamation