ブラーエフェクトとは?
ここ最近のiOSアプリでは、UIをリッチに見せるためにブラーエフェクト(磨りガラス効果)を使用する機会が増えてきました。ここでは主にUIImageViewでブラー画像を容易に扱えるようにする方法を書いていこうと思います。
今回、SABlurImageViewというUIImageViewのサブクラスを使用します。
SABlurImageViewを使用することで
- ブラー画像の生成
- 通常の画像からブラー画像に変化するアニメーション
- alphaを指定するように0.0から1.0の間でブラー画像の度合いの調整
を容易に実現することができます。
Youtubeよりサンプルの動画もご覧いただけます。
使用方法
以下でimage
と表記されている変数は、UIImage
のインスタンスです。
・ブラー画像の生成
let imageView = SABlurImageView(image: image)
// ボックスサイズ30pxのブラー画像を生成する
imageView.addBlurEffect(30)
let imageView = SABlurImageView(image: image)
// 複数回ブラーエフェクト
imageView.addBlurEffect(30, times: 3)
・ブラー画像のアニメーション
let imageView = SABlurImageView(image: image)
// ボックスサイズ100pxのブラー画像の準備を行う
imageView.configrationForBlurAnimation(100)
// 2秒かけて通常画像からブラー画像に変わるアニメーションをする
imageView.startBlurAnimation(duration: 2.0)
1回目にstartBlurAnimation
を呼ぶと、通常画像からブラー画像へ変わるアニメーションをしますが
2回目は自動的にブラー画像から通常画像へ変わるアニメーションをします。
・0.0から1.0でブラー画像を調整
let imageView = SABlurImageView(image: image)
// ボックスサイズ100pxのブラー画像の準備を行う
imageView.configrationForBlurAnimation(100)
// 50%のブラー画像を表示する
imageView.blur(0.5)
UISliderやUIScrollViewのスクロールに合わせて、0.0から1.0でブラー画像を調整することで
リアルタイムのようなブラーエフェクトを実現できます。
どうのように動いているのか
例として100pxのボックスサイズのブラーエフェクトをかけることにします。
まず、configrationForBlurAnimation
の中で
1px、4px、9px、16px、25px、36px、49px、64px、81px、100px
のボックスサイズのブラー画像が10枚生成されています。
startBlurAnimation
が呼ばれた場合はCATransition
のkCATransitionFade
を使用して
指定された秒数内で10枚の画像をFadeで切り替えるアニメーションが行われています。
blur
が呼ばれた場合は
現在表示されている画像の上に、CALayer
を使って次に表示される画像が
任意のopacity
を適用して描画されています。
例えば、25%のブラーエフェクトを指定した場合は
2枚目のブラー画像を表示しつつ、CALayer
をつかって3枚目のブラー画像が
50%のopacity
で描画されています。
上記のように画像の切り替えを行っているので、UISlider
やUIScrollView
のスクロールに
合わせてブラー画像を滑らかに表示することも可能になります。
最後に
このようにして、容易にブラーエフェクトを使用することができます。
よりリッチなアプリを作って行きましょう!!