【Swift】CAGradientLayer の透過が濁る

2019.08.01
iOS
CAGradientLayer, Programing, Swift, Xcode, グラデーション

iOSにて、CAGradientLayer を使って透過を含むグラデーションを行った際、濁る現象があったので対応の備忘録。

1. CAGradientLayer の使い方
2. CAGradientLayer に透過を利用すると色が濁る
3. 検証Playground
4. 検証環境
5. 参考ドキュメント

CAGradientLayer の使い方

CAGradientLayer の基本的な使い方については、こちらを参照のこと。
　

CAGradientLayer に透過を利用すると色が濁る

当然のことながら CAGradientLayer はグラデーションを作成するレイヤーです。
「そこで、透過から赤へのグラデーションを作ろう！」と思った時、グラデーションが濁る（中間色がグレーになる）ことに気がつきました。
下記がその時の画像です。

この時僕が作成したコードは下記のようなものでした。

        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [UIColor.clear.cgColor, UIColor.red.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        view.layer.addSublayer(gradientLayer)

let gradientLayer = CAGradientLayer()

gradientLayer.colors = [UIColor.clear.cgColor, UIColor.red.cgColor]

gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)

gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

view.layer.addSublayer(gradientLayer)

　
一見、コード上はあっているように思えますが、実は UIColor.clear.cgColor が正しくありませんでした！

先に結論を申し上げると、この部分を UIColor.red.withAlphaComponent(0).cgColor に修正すると綺麗に透過グラデーションがかかります。

全体コードでは下記です。

        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [UIColor.red.withAlphaComponent(0).cgColor, UIColor.red.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        view.layer.addSublayer(gradientLayer)

let gradientLayer = CAGradientLayer()

gradientLayer.colors = [UIColor.red.withAlphaComponent(0).cgColor, UIColor.red.cgColor]

gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)

gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

gradientLayer.frame = CGRect(x: 0, y: 0, width: 200, height: 200)

view.layer.addSublayer(gradientLayer)

考えてみれば当然で、プログラム上には何色の透過から赤に向かえば良いかが明記されていません。
つまり UIColor.clear.cgColor は黒の透過（おそらくマスクをかけた際のアルファ計算の基準色だから）として扱われているので、赤へのグラデーションにグレーが混じるということだと思います。

「なんか透明のグラデーション作ったけど綺麗じゃないなぁ」と思ったら参考にしてみてください。

検証Playground

検証Playground Git

検証環境

Mac: 10.14.4
XCode: 10.2
Swift: 5.0

参考ドキュメント

公式 CAGradientLayer ドキュメント

前の記事

SwiftUIを触って分かったこと：①初期画面の設定方法 2019.06.09
次の記事

FirebaseDistributionへのテスター登録手順（developer証明書の場合） 2020.08.12