レコードをつくってみる

完成

コード

VinylRecord.swift

struct ContentView25: View {
  @State private var rotation: Double = 0.0
  let labelText: String
  
  init(labelText: String = "YOUR LABEL") {
    self.labelText = labelText
  }
  
  var body: some View {
    ZStack {
      // レコード本体
      Circle()
        .fill(Color.black)
        .shadow(color: .gray, radius: 10, x: 0, y: 5)
      
      // レコードの溝
      ForEach(0..<50) { i in
        Circle()
          .stroke(Color.gray.opacity(0.2), lineWidth: 3.0)
          .scaleEffect(CGFloat(50 - i) / 50)
      }
      
      // レコードのレーベル
      Circle()
        .fill(Color.red)
        .scaleEffect(0.3)
      
      // レーベルのテキスト
      Text(labelText)
        .font(.system(size: 12))
        .fontWeight(.bold)
        .foregroundColor(.white)
        .frame(width: 80)
        .rotationEffect(.degrees(-rotation))
      
      // 中心の穴
      Circle()
        .fill(Color.white)
        .scaleEffect(0.05)
    }
    .frame(width: 300, height: 300)

    // レコードの回転
    .rotationEffect(.degrees(0))
    .onAppear {
      withAnimation(Animation.linear(duration: 5).repeatForever(autoreverses: false)) {
        rotation = 360
      }
    }
  }
}

#Preview {
  VStack {
    ContentView25(labelText: "CLASSIC HITS")
    Text("Now Playing")
      .font(.title)
      .padding()
  }
}

まとめ

レコードが回転する模様をつくることができました。
リッチなSpotifyを作りたいと考えているので、一つ前進しました。