📝記事本文
SwiftUIでアプリの背景を少し動かしたいときに、LinearGradient（線形グラデーション）とアニメーションを組み合わせると簡単に実現できます。
今回は「ゆっくり色が動くグラデーション背景」を実装してみました。
🎨 コード全体
💡ポイント解説
🌀 1. @Stateで状態を管理
animateGradient という真偽値を用意して、
true ⇔ false が切り替わることでグラデーションの開始位置と終了位置を入れ替えています。
🌈 2. LinearGradientで背景を作成
colorsに複数の色を指定し、startPointとendPointで方向を制御します。
今回は 青→黒のグラデーション がゆっくり動くようにしました。
⏱️ 3. .animationでゆっくり動かす
5秒間でゆっくり移動するように easeInOut(duration: 5) を指定し、
repeatForever(autoreverses: true) で往復アニメーションを繰り返します。
🚀 4. .onAppearでアニメーションを開始
ビューが表示されたタイミングで animateGradient = true に変更することで、
アニメーションが自動的にスタートします。
🌌 完成イメージ
完成すると、背景がゆっくりと色を変えながら動く幻想的なアニメーションになります。
※動画がアップできなかったのでスクショになります。これが斜め方向に動きます。
✨まとめ
SwiftUIでは数行のコードでアニメーション付きの背景を作ることができます。
複雑なUIViewアニメーションを書かなくても、
状態変化と .animation() の組み合わせだけで実現できるのが魅力です。