ブラーエフェクトとは？
ここ最近の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のスクロールに
合わせてブラー画像を滑らかに表示することも可能になります。
最後に
このようにして、容易にブラーエフェクトを使用することができます。
よりリッチなアプリを作って行きましょう！！