線形、放射状、角度付きグラデーション
滑らかな色の変化でビューを塗りつぶします。
「線形、放射状、角度付きグラデーション」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
What Is a Gradient?
A gradient blends smoothly between two or more colors. It adds depth and polish that a flat fill cannot. 🌈
Gradients Are Views Too
Just like Color, a LinearGradient is a view. You can place it directly or use it to fill a shape or background.
Your First LinearGradient
A LinearGradient flows colors along a straight line. Give it colors plus a start and end point to set the direction.
LinearGradient(
colors: [.blue, .purple],
startPoint: .top,
endPoint: .bottom
)Choosing Start & End Points
Points like .topLeading and .bottomTrailing aim the gradient diagonally. Swap them to change the angle of the blend.
startPoint: .topLeading
endPoint: .bottomTrailingMore Than Two Colors
Pass several colors and the gradient spreads them evenly across its length. Great for sunset-style backgrounds.
LinearGradient(
colors: [.orange, .pink, .purple],
startPoint: .leading,
endPoint: .trailing
)RadialGradient Glows Outward
A RadialGradient radiates from a center point outward in a circle. It is perfect for spotlights and soft glows.
RadialGradient(
colors: [.yellow, .red],
center: .center,
startRadius: 5,
endRadius: 120
)Tuning the Radius
The startRadius and endRadius control how tight or wide the glow spreads. Bigger gaps mean smoother, slower fades.
AngularGradient Sweeps Around
An AngularGradient wraps colors around a center, like a color wheel. It creates a cool conical, swirling effect.
AngularGradient(
colors: [.red, .green, .blue, .red],
center: .center
)Gradient as a Background
Attach a gradient with the background modifier to brighten any view behind your content. Instant visual lift.
Text("Hi")
.padding()
.background(LinearGradient(
colors: [.blue, .cyan],
startPoint: .top, endPoint: .bottom))Shorthand Gradients
For a quick blend, call .gradient on any color. SwiftUI builds a subtle top-to-bottom gradient for you instantly.
Circle()
.fill(Color.blue.gradient)Pick the Right Gradient
Use linear for directional fades, radial for glows, and angular for wheels. Each gives a different mood to your UI. 🎨
Quick Check
Which gradient sweeps its colors around a center point?
Recap: Gradients
You now blend colors three ways: linear along a line, radial from a center, and angular around a wheel. Beautiful work!
AI チューターと学ぶ Swift — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「線形、放射状、角度付きグラデーション」レッスンは無料ですか？
はい。「線形、放射状、角度付きグラデーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「線形、放射状、角度付きグラデーション」で何を学びますか？
滑らかな色の変化でビューを塗りつぶします。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「線形、放射状、角度付きグラデーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Color 型とアセットの色
- 線形、放射状、角度付きグラデーション
- 組み込みシェイプ
- Stroke、Fill、overlay