【Swift】Viewにぼかし効果を追加してみよう！

Viewにぼかし効果を追加しておしゃれな演出をしたかったので、Viewにぼかし効果を追加する方法を調べてみました。

環境

• Xcode 12.5
• Swift 5.4

はじめに

今回はview配下にimageViewを追加しており、このviewControllerのviewに対してぼかし効果を追加していき、どのような効果が付加されるかを検証していきたいと思います。

ぼかし効果を追加

ぼかし効果は、ほんの数行で追加が出来ます。

import UIKit

class BlurEffectSampleViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // ぼかし効果のスタイルを決め、エフェクトを生成
        let blurEffect = UIBlurEffect(style: .regular)

        // ぼかし効果を設定したUIVisualEffectViewのインスタンスを生成
        let blurEffectView = UIVisualEffectView(effect: blurEffect)

        // ぼかし効果Viewのframeをviewのframeに合わせる
        blurEffectView.frame = view.frame

        // viewにぼかし効果viewを追加
        view.addSubview(blurEffectView)
    }
}

UIVisualEffectView

UIVisualEffectViewを使用することで簡単にぼかし効果を追加することが出来ます。 また、UIVisualEffectView(effect:)でUIBlurEffectを設定してあげることで様々なぼかし効果を演出することが出来ます。

UIBlurEffect

UIBlurEffectは、UIVisualEffectViewの背後にレイヤー化されたコンテンツにぼかし効果を適用するオブジェクトで、UIBlurEffect.styleには沢山の種類があり、選んだスタイルによって得られるぼかし効果は変わってきます。

UIBlurEffect.style

全部で20種類のスタイルがあります。

UIBlurEffect.styleのドキュメント上では全21種類でAdditional Stylesに6つのスタイルがあることになっていますが、Xcode 12.5では5つのスタイルの存在しか確認できませんでした。

• Adaptable Styles
  • systemUltraThinMaterial
  • systemThinMaterial
  • systemMaterial
  • systemThickMaterial
  • systemChromeMaterial
• Light Styles
  • systemUltraThinMaterialLight
  • systemThinMaterialLight
  • systemMaterialLight
  • systemThickMaterialLight
  • systemChromeMaterialLight
• Dark Styles
  • systemUltraThinMaterialDark
  • systemThinMaterialDark
  • systemMaterialDark
  • systemThickMaterialDark
  • systemChromeMaterialDark
• Additional Styles
  • regular
  • light
  • extraLight
  • dark
  • prominent

文字だけでは実際にどのような効果が得られるのか分かりにくいので実際に画面で違いを見ていきましょう！

ぼかし効果の違いを比べてみよう

Adaptable Styles

効果なし	systemUltraThinMaterial	systemThinMaterial

systemMaterial	systemThickMaterial	systemChromeMaterial

Light Styles

効果なし	systemUltraThinMaterialLight	systemThinMaterialLight

systemMaterialLight	systemThickMaterialLight	systemChromeMaterialLight

Dark Styles

効果なし	systemUltraThinMaterialDark	systemThinMaterialDark

systemMaterialDark	systemThickMaterialDark	systemChromeMaterialDark

Additional Styles

効果なし	light	extraLight

regular	dark	prominent

実際にぼかし効果を追加してみると、僅かながらそれぞれに違いがあるのが分かりました。 具体的にどのような効果の違いなのかは、UIBlurEffect.styleのそれぞれの説明を見ていただければと思います。

おわりに

お好みのぼかし効果は見つけられたでしょうか？

ぼかし効果といっても、様々なスタイルがあることが分かりました。今回のように画像を単にぼかすだけではなく、このぼかし効果を使って一部だけぼかしたりや、人物以外の箇所をぼかしたりなど色々応用が出来そうです。

ぼかし効果を使って、この夏をおしゃれに乗り越えたいと思います。

Let's blur!!

参考

• ぼかし効果をたった 4 行で！ ｜ DevelopersIO
• UIVisualEffectView
• UIBlurEffect