LoginSignup
3
3

More than 3 years have passed since last update.

【Swift】CAGradientLayer の透過が濁る

Posted at

下記ブログの転載です!
https://rc-code.info/ios/post-305/

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

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)

 
一見、コード上はあっているように思えますが、実は 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)

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

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

検証Playground

検証Playground Git
 

検証環境

Mac: 10.14.4
XCode: 10.2
Swift: 5.0
 

参考ドキュメント

公式 CAGradientLayer ドキュメント
 
 

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3