CGGradient：グラデーションの種類とその作成方法

CGGradientとは？

CGGradient はCore Graphicsにおける不変オブジェクトで、一連の色とグラデーション遷移に沿ったそれらのブレンドルールをカプセル化します。内部的に、CGGradientはCGColorの配列、[0.0, 1.0]の範囲の位置（locations）の配列、および色が解釈されるCGColorSpaceへの参照を格納します。各色はグラデーションスケール上の位置に関連付けられています：位置0.0は開始、1.0は遷移の終了に対応します。

CGGradientCreateWithColors 関数を使用して CGGradient を作成する際、Core Graphicsは中間色の値を事前計算します。グラデーションには任意の数のカラーストップを含めることができ、複雑な多色遷移が可能です。色の数は少なくとも2つ必要であり、各色はlocations配列内の位置に対応する必要があります。

CGGradient のアーキテクチャは、Core AnimationのCAGradientLayerなどの高レベルAPIとは異なり、Core Graphicsコンテキストで直接動作します。これにより、描画プロセスを完全に制御し、グラデーションを他のQuartz 2D操作（クリッピングマスク、シャドウ、トランスフォーム）と組み合わせる機能を提供します。

線形グラデーションと放射グラデーション

Core Graphics は線形（軸方向）と放射の2種類のグラデーションをサポートしています。線形グラデーションは CGGradientCreateWithColors 関数で作成され、CGContextDrawLinearGradient で描画されます。放射グラデーションは同じCGGradient構造を必要としますが、CGContextDrawRadialGradient で描画されます。

線形グラデーション（軸方向）

線形グラデーション は、開始点 startPoint から終了点 endPoint までの直線に沿って色の遷移を伸ばします。色はこれらの2点間で補間され、その外側の動作は拡張オプションによって制御されます。線形グラデーションは、滑らかな背景の作成、金属表面のシミュレーション、インターフェース要素の色遷移に最適です。

放射グラデーション

放射グラデーション は、ある円から別の円への色の遷移を作成します。各円は中心（startCenter / endCenter）と半径（startRadius / endRadius）で定義されます。色は内側の円から外側の円に向かって補間されます。特殊なケースとして、開始半径が0の場合、グラデーションは単一の点から放射状に広がります。放射グラデーションは、光源、レンズ、天体、スポットライト効果のシミュレーションに使用されます。

CGGradientの作成：色と位置

CGGradient は唯一の基本関数 — CGGradientCreateWithColors で作成されます。この関数はCGColorSpace、CGColorの配列（CFArray）、およびCGFloatのlocations配列を受け取ります。locationsがNULLの場合、色はグラデーションスケールに沿って均等に分布されます。locationsが指定されている場合、その数は色の数と一致する必要があります。

locations 配列には、各色のストップポイントを定義する0.0〜1.0の値が含まれます。値は単調に増加する必要があります。最初の値が0.0より大きい場合、開始からこの位置までの色は位置0.0の色から外挿されます。最後の値が1.0未満の場合も同様です。この動作は描画時の拡張オプションによって制御されます。

グラデーションの 色 を選択する際は、色空間を考慮することが重要です。単一のCGGradient内のすべての色は同じCGColorSpaceに属している必要があります — Core Graphicsはその空間でコンポーネントを補間します。異なる空間で色が作成された場合、CGColorCreateCopyByMatchingToColorSpace を使用して共通の空間に変換する必要があります。

コンテキストでのグラデーションの描画

Core Graphics はグラデーションを描画するための2つの関数を提供します：線形用の CGContextDrawLinearGradient と放射用の CGContextDrawRadialGradient です。両方の関数は、グラフィックコンテキスト、CGGradientオブジェクト、拡張オプション、およびタイプ固有の幾何学的パラメータを受け取ります。描画は現在のクリッピングマスクとコンテキストのトランスフォーメーションを考慮して実行されます。

拡張オプション（グラデーションオプション）

拡張オプション は、0.0〜1.0の位置範囲を超えたグラデーションの動作を制御します。定数 kCGGradientDrawsBeforeStartLocation は、開始位置より前の領域を最初のストップの色で塗りつぶします。kCGGradientDrawsAfterEndLocation は最後のストップの色で塗りつぶします。これらのオプションはビットマスクで組み合わせることができます。放射グラデーションの場合、オプションは開始半径と終了半径の外側の領域に適用されます。

トランスフォーメーションの影響

グラデーションは、現在のグラフィックコンテキストの座標系で、そのトランスフォーメーション（CTM — カレントトランスフォーメーションマトリックス）を考慮して 描画されます。描画関数を呼び出す前に CGContextTranslateCTM、CGContextScaleCTM、または CGContextRotateCTM を適用すると、グラデーションの位置とスケールが変更されます。これにより、新しいオブジェクトを作成せずに、異なる領域で単一のCGGradientを再利用できます。

オプション：拡張、スムージング、マスキング

Core Graphics はグラデーションを制御するためのいくつかの追加メカニズムを提供します：アンチエイリアシング、クリッピングマスクによるマスキング、透明度効果との組み合わせです。アンチエイリアシングはグラフィックコンテキストでデフォルトで有効になっており、CGContextSetShouldAntialias で制御されます。

クリッピングマスク を使用すると、グラデーションの描画領域を任意の形状に制限できます。CGContextDrawLinearGradient を呼び出す前に、CGContextBeginPath、CGContextAddPath、CGContextClip を使用してパスを定義する必要があります。グラデーションはこのパスで囲まれた領域内のみに描画されます。これはグラデーションアイコン、ボタン、プログレスバーの作成に広く使用されています。

グラデーションの拡張 はもう1つの重要なパラメータです。kCGGradientDrawsBeforeStartLocation を使用すると、Core GraphicsはstartPointより前の領域全体に最初のストップの色を外挿します。このオプションがない場合、グラデーションの外側の領域は塗りつぶされず（透明に）なります。両方のオプションを組み合わせると、startPointとendPointが内部にあっても、グラフィックコンテキストの矩形全体がグラデーションで塗りつぶされることが保証されます。

Swiftコード例

CGGradientとCore Graphicsを使用したiOSでのグラデーションの作成と描画の 実践的な例 を見てみましょう。

3色の線形グラデーション

この例では、3色（青、緑、赤）の 線形グラデーション を作成し、UIViewの対角線に沿って描画します。locations配列は色を不均等に分布します：青は0.0〜0.3、緑は0.6、赤は0.6〜1.0です。

func drawLinearGradient(in ctx: CGContext,
                          rect: CGRect) {
    let colors = [
        UIColor.blue.cgColor,
        UIColor.green.cgColor,
        UIColor.red.cgColor
    ] as CFArray

    let locations: [CGFloat] = [0.0, 0.6, 1.0]
    let space = CGColorSpaceCreateDeviceRGB()

    guard let gradient = CGGradientCreateWithColors(
        space, colors, locations
    ) else { return }

    let start = CGPoint(x: 0, y: 0)
    let end = CGPoint(x: rect.width,
                         y: rect.height)

    ctx.drawLinearGradient(gradient,
        start: start, end: end,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

グロー効果のある放射グラデーション

この例では、グロー効果をシミュレートする 放射グラデーション を描画します。半径0の開始点がグローの中心を定義し、外側の円がフェード境界を定義します。この効果は、インターフェース要素やアクティビティインジケータの強調表示に使用されます。

func drawRadialGlow(in ctx: CGContext,
                     center: CGPoint) {
    let colors = [
        UIColor.white.cgColor,
        UIColor.orange.cgColor,
        UIColor.clear.cgColor
    ] as CFArray
    let locations: [CGFloat] = [0.0, 0.4, 1.0]

    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(), colors, locations)

    ctx.drawRadialGradient(gradient,
        startCenter: center, startRadius: 0,
        endCenter: center, endRadius: 100,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

クリッピングマスク付きグラデーション

この例では、グラデーション がクリッピングパスによって円形領域に制限されています。グラデーションを描画する前に、円形パスが定義され、現在のコンテキストマスクになります。グラデーションは円の内部のみを塗りつぶし、グラデーションアイコン効果を生み出します。

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Creating circular clip path
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Drawing gradient inside clip mask
    let colors = [UIColor.magenta.cgColor,
                    UIColor.cyan.cgColor]
    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(),
        colors as CFArray, nil)

    ctx.drawLinearGradient(gradient,
        start: CGPoint(x: 0, y: 0),
        end: CGPoint(x: rect.width,
                     y: rect.height),
        options: [.drawsBeforeStartLocation])
}