如何为模拟进度条的带图案UIView添加连续滚动动画？

要给progressOverlayView的背景图案添加连续滚动效果，你可以通过修改视图layer的contentsOffset属性来实现无限滚动动画，具体修改如下：

完整修改后的代码 #

import UIKit

class SideMenuButtons: UIViewController {
    var progressOverlayView: UIView!
    @IBOutlet weak var energyReloadingIndicator: UIProgressView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        startPatternScrollAnimation()
    }
    
    private func setupUI() {
        progressOverlayView = UIView()
        if let patternImage = UIImage(named: "striped-pattern-repeated") {
            progressOverlayView.backgroundColor = UIColor(patternImage: patternImage)
        } else {
            progressOverlayView.backgroundColor = .red
        }
        energyReloadingIndicator.addSubview(progressOverlayView)
        updateProgressOverlayViewWidth()
    }
    
    private func updateProgressOverlayViewWidth() {
        let progress = CGFloat(energyReloadingIndicator.progress)
        let maxWidth = energyReloadingIndicator.frame.width
        let overlayWidth = maxWidth * progress
        let overlayHeight = energyReloadingIndicator.frame.height
        progressOverlayView.frame = CGRect(x: 0, y: 0, width: overlayWidth, height: overlayHeight)
    }
    
    // 添加图案滚动动画
    private func startPatternScrollAnimation() {
        guard let patternImage = UIImage(named: "striped-pattern-repeated") else { return }
        
        // 创建layer偏移动画
        let scrollAnimation = CABasicAnimation(keyPath: "contentsOffset.x")
        // 偏移量设为图案自身宽度，保证滚动后无缝衔接
        scrollAnimation.byValue = patternImage.size.width
        // 滚动一圈的时长，可根据需求调整
        scrollAnimation.duration = 1.5
        // 无限重复动画
        scrollAnimation.repeatCount = .infinity
        // 匀速滚动，避免快慢变化
        scrollAnimation.timingFunction = CAMediaTimingFunction(name: .linear)
        
        progressOverlayView.layer.add(scrollAnimation, forKey: "patternHorizontalScroll")
    }
    
    // 更新进度时调用此方法
    func updateProgress(to value: Float) {
        energyReloadingIndicator.progress = value
        updateProgressOverlayViewWidth()
    }
}

关键说明 #

• 动画原理：利用CABasicAnimation修改layer的contentsOffset.x属性，让背景图案持续水平偏移。因为你的图案是对称重复的，偏移量设为图案自身宽度时，滚动结束后会无缝衔接，形成连续滚动效果。
• 参数调整：duration控制滚动速度，数值越小滚动越快；timingFunction设为.linear保证匀速滚动，避免卡顿感。
• 额外操作：如果需要停止动画，可调用progressOverlayView.layer.removeAnimation(forKey: "patternHorizontalScroll")；更新进度时，动画会自动适配新的视图宽度，不会中断。

内容的提问来源于stack exchange，提问作者Mr.Schtelbe