swift 条形进度条动画-CFANZ编程社区

科普文章：Swift 条形进度条动画

在移动应用程序开发中，经常需要使用进度条来展示任务的完成情况。条形进度条是一种常见的进度条样式，它可以直观地展示任务的进度，并给用户清晰的反馈。在 Swift 中，我们可以利用 UIView 的动画功能来实现一个简单而流畅的条形进度条动画。

进度条动画代码示例

下面是一个简单的 Swift 代码示例，演示了如何使用 UIView 的动画功能实现一个条形进度条动画：

import UIKit

class ProgressBarView: UIView {
    
    var progress: CGFloat = 0.0 {
        didSet {
            setNeedsDisplay()
        }
    }
    
    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        
        // 绘制灰色背景
        context?.setFillColor(UIColor.lightGray.cgColor)
        context?.fill(rect)
        
        // 计算进度条宽度
        let progressWidth = rect.width * progress
        
        // 绘制进度条
        context?.setFillColor(UIColor.blue.cgColor)
        context?.fill(CGRect(x: 0, y: 0, width: progressWidth, height: rect.height))
    }
    
    func animateProgress(to newProgress: CGFloat, duration: TimeInterval) {
        UIView.animate(withDuration: duration) {
            self.progress = newProgress
        }
    }
}

在上面的代码中，我们定义了一个 ProgressBarView 类，用于显示条形进度条。它有一个 progress 属性来表示进度，当进度值改变时会自动触发 draw 方法重新绘制进度条。我们还定义了一个 animateProgress 方法，用于实现进度条动画效果。

类图示例

下面是 ProgressBarView 类的类图示例：

classDiagram
    class ProgressBarView {
        progress: CGFloat
        animateProgress(to newProgress: CGFloat, duration: TimeInterval)
    }

进度条动画的使用

我们可以在视图控制器中使用 ProgressBarView 类来展示条形进度条动画。下面是一个简单的示例：

import UIKit

class ViewController: UIViewController {
    
    var progressBarView: ProgressBarView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        progressBarView = ProgressBarView(frame: CGRect(x: 50, y: 100, width: 200, height: 20))
        progressBarView.progress = 0.0
        view.addSubview(progressBarView)
        
        progressBarView.animateProgress(to: 1.0, duration: 2.0)
    }
}

在上面的代码中，我们在 viewDidLoad 方法中创建了一个 ProgressBarView 实例，并将其添加到视图中。然后调用 animateProgress 方法来开始进度条动画，将进度值从 0.0 变化到 1.0，动画持续时间为 2.0 秒。

通过这种方式，我们可以实现一个简单而流畅的条形进度条动画，为用户提供良好的交互体验。