【Swift】CAGradientLayer の透過が濁る
- 2019.08.01
- iOS
- CAGradientLayer, Programing, Swift, Xcode, グラデーション
iOSにて、CAGradientLayer を使って透過を含むグラデーションを行った際、濁る現象があったので対応の備忘録。
CAGradientLayer の使い方
CAGradientLayer の基本的な使い方については、こちら を参照のこと。
CAGradientLayer に透過を利用すると色が濁る
当然のことながら CAGradientLayer はグラデーションを作成するレイヤーです。
「そこで、透過から赤へのグラデーションを作ろう！」と思った時、グラデーションが濁る（中間色がグレーになる）ことに気がつきました。
下記がその時の画像です。
この時僕が作成したコードは下記のようなものでした。
|
1 2 3 4 5 6 7 |
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 に修正すると綺麗に透過グラデーションがかかります。
全体コードでは下記です。
|
1 2 3 4 5 6 7 |
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
検証環境
Mac: 10.14.4
XCode: 10.2
Swift: 5.0
参考ドキュメント
-
前の記事
SwiftUIを触って分かったこと：①初期画面の設定方法 2019.06.09
-
次の記事
記事がありません