Shape和Animation携手打造圆形进度条，引领SwiftUI动感之旅

2024-02-07 07:23:03

SwiftUI 圆形进度条：用 Shape 和 Animation 点亮你的界面

简介

准备好让你的 SwiftUI 应用程序焕发活力了吗？在本教程中，我们将探索 Shape 和 Animation 的强大功能，教你如何打造一个动感的圆形进度条。让我们开始吧！

Shape：构建你几何图形的基石

Shape 是 SwiftUI 的基本构件，用于创建各种几何图形，包括矩形、圆形、椭圆和多边形。要定义一个 Shape，请使用以下语法：

struct MyShape: Shape {
  func path(in rect: CGRect) -> Path {
    // 在此定义你的形状路径
  }
}

Animation：让你的界面动起来

Animation 允许你以流畅且引人入胜的方式更改视图属性。你可以使用各种动画效果，例如平移、旋转、缩放和颜色渐变。要应用动画，请使用 withAnimation(_:) 修饰符：

View()
  .withAnimation(.easeInOut(duration: 1.0))
  {
    // 在此更新视图属性
  }

构建圆形进度条

现在，让我们将 Shape 和 Animation 结合起来，创建一个圆形进度条。我们将使用 Shape 定义进度条的环形路径，并使用 Animation 控制进度的平滑过渡。

1. 定义进度条形状

struct CircularProgressShape: Shape {
  var progress: Double
  var thickness: CGFloat
  
  func path(in rect: CGRect) -> Path {
    // 计算中心、半径、起始角度和结束角度
    var path = Path()
    path.addArc(center: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)
    return path
  }
}

2. 使用 Animation 控制进度

struct CircularProgressBar: View {
  @State private var progress: Double = 0.0
  
  var body: some View {
    ZStack {
      CircularProgressShape(progress: progress, thickness: 10.0)
        .stroke(Color.blue, lineWidth: 10.0)
      
      Text("\(Int(progress * 100))%")
        .font(.system(size: 20.0))
        .foregroundColor(.white)
    }
    .onAppear {
      withAnimation(.easeInOut(duration: 1.0)) {
        self.progress = 0.5
      }
    }
  }
}