Zenn
🌈

【SwiftUI】格子状（メッシュ状）のグラデーションを数行で作る

2024/08/20に公開
iOS
Swift
SwiftUI
iPadOS
WWDC
tech

iOS18から、SwiftUIでMeshGradientのAPIが利用できるようになりました

iOS17まで

iOS17までの公式APIではcolors: [Color]もしくはstops: [Gradient.Stop]の配列からGradientを生成することができました。

例えばLinearGradientにGradient(colors: [.red, .purple, .blue])を渡すと赤、紫、青が均等に並んだ直線的なグラデーションを作ることができます。

iOS18からは公式APIで格子状（メッシュ状）のグラデーションがサポートされるようになりました。

一番シンプルにMeshGradientを使うには、width, height, points, colorsを渡します。

MeshGradient(
  width: Int,
  height: Int,
  points: [SIMD2<Float>],
  colors: [Color],
  background: Color = .clear,
  smoothsColors: Bool = true,
  colorSpace: Gradient.ColorSpace = .device
)

使用例

MeshGradient(width: 3, height: 3, points: [
  [0, 0],   [0.5, 0],   [1.0, 0],
  [0, 0.5], [0.5, 0.5], [1.0, 0.5],
  [0, 1.0], [0.5, 1.0], [1.0, 1.0]
], colors: [
  .red, .purple, .indigo,
  .orange, .cyan, .blue,
  .yellow, .green, .mint
])

Meshの位置指定

pointsにはSIMD2<Float>（[0, 0]が左上、[1, 0]が右上にくる）の配列を渡し、xとyの相対的な位置を指定します。

ドキュメント

https://developer.apple.com/documentation/swiftui/gradient
https://developer.apple.com/documentation/swiftui/lineargradient
https://developer.apple.com/documentation/swiftui/meshgradient
https://developer.apple.com/documentation/swift/simd2

Discussion