パス、グラデーション、ブレンドモード
複雑な塗りとストロークを作成します。
「パス、グラデーション、ブレンドモード」はCoddyKit上の無料Jetpack Compose Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。
単純な図形の先へ
線や円も便利ですが、本格的なグラフィックスには曲線や豊かな塗りが必要です。次のレベルを実現する Path、グラデーション、ブレンドモードを見ていきましょう。
Pathとは
Pathは、点を1つずつ指定して作る、記録された輪郭です。移動と線の描画を組み合わせて形の周囲をたどり、最後に1回の呼び出しで完成した形を描画します。
val path = Path()
path.moveTo(0f, 0f)
path.lineTo(100f, 0f)moveToとlineTo
moveToでペンを始点まで移動し、次にlineToで直線の線分を描画します。これらをつなげれば、好きな多角形をたどれます。
path.moveTo(0f, 0f)
path.lineTo(80f, 120f)
path.lineTo(160f, 0f)
path.close()quadraticBezierToで曲線を描く
滑らかな曲線にはquadraticBezierToを使います。制御点で線を曲線へ引っ張るため、グラフの柔らかな端を描くのに最適です。
path.quadraticBezierTo(50f, -40f, 100f, 0f)Pathを描画する
作成したPathを、色やブラシとともにdrawPathへ渡します。単色で塗りつぶすことも、Strokeスタイルで輪郭を描くこともできます。
drawPath(path = path, color = Color.Blue)Brushを使う
Brushは、領域をどのように塗るかを定義します。単一の色ではなく、Brushを使えば形全体に滑らかなグラデーションを広げられます。
線形グラデーション
Brush.linearGradientを使うと、直線に沿って色を混ぜられます。色のリストを渡すと、色が1つずつ次の色へ滑らかに変化します。
val brush = Brush.linearGradient(
listOf(Color.Cyan, Color.Magenta)
)
drawRect(brush = brush)放射状グラデーション
Brush.radialGradientを使うと、中心から外側へ向かって色を混ぜられます。スポットライト、柔らかなボタン、光る球体に最適です。
val glow = Brush.radialGradient(
listOf(Color.White, Color.Blue)
)スイープグラデーション
Brush.sweepGradientは、中心点の周囲で色を回転させます。カラフルな進捗リングや虹色のダイヤルの秘密はこれです。
val sweep = Brush.sweepGradient(
listOf(Color.Red, Color.Yellow, Color.Red)
)BlendModeを使う
BlendModeは、新しい形をすでに描画されている内容とどのように混ぜるかを決めます。Multiplyは暗くし、Screenは明るくし、Plusは光を加えます。
drawCircle(
color = Color.Yellow,
blendMode = BlendMode.Multiply
)エフェクト用に重ねる
ブレンドモードは、形が重なったときに効果を発揮します。半透明の円を2つ、BlendMode.Plusで重ねると、交差部分がより明るく光ります。
確認問題
中心点の周囲で色を回転させるBrushはどれですか？
まとめ
Pathで曲線を作り、線形・放射状・スイープグラデーションで形を塗り、ブレンドモードで組み合わせられるようになりました。さあ、自由に作ってみましょう！✨
AI チューターと学ぶ Kotlin — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「パス、グラデーション、ブレンドモード」レッスンは無料ですか？
はい。「パス、グラデーション、ブレンドモード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。
「パス、グラデーション、ブレンドモード」で何を学びますか？
複雑な塗りとストロークを作成します。 ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Jetpack Compose Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「パス、グラデーション、ブレンドモード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJetpack Compose Academyレッスンでコードを書いて実行できますか？
はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- DrawScope：線、矩形、円
- パス、グラデーション、ブレンドモード
- drawWithCacheとパフォーマンス
- ライブ進捗リングを作る