iOSアプリ開発でブラーエフェクトを手間なく使う方法

More than 1 year has passed since last update.

ブラーエフェクトとは?

ここ最近のiOSアプリでは、UIをリッチに見せるためにブラーエフェクト(磨りガラス効果)を使用する機会が増えてきました。ここでは主にUIImageViewでブラー画像を容易に扱えるようにする方法を書いていこうと思います。

今回、SABlurImageViewというUIImageViewのサブクラスを使用します。
SABlurImageViewを使用することで
- ブラー画像の生成
- 通常の画像からブラー画像に変化するアニメーション
- alphaを指定するように0.0から1.0の間でブラー画像の度合いの調整
を容易に実現することができます。

Youtubeよりサンプルの動画もご覧いただけます。

iOS Simulator Screen Shot 2015.04.08 23.39.09.pngiOS Simulator Screen Shot 2015.04.08 23.39.12.png

使用方法

以下で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が呼ばれた場合はCATransitionkCATransitionFadeを使用して
指定された秒数内で10枚の画像をFadeで切り替えるアニメーションが行われています。

blurが呼ばれた場合は
現在表示されている画像の上に、CALayerを使って次に表示される画像が
任意のopacityを適用して描画されています。
例えば、25%のブラーエフェクトを指定した場合は
2枚目のブラー画像を表示しつつ、CALayerをつかって3枚目のブラー画像が
50%のopacityで描画されています。
上記のように画像の切り替えを行っているので、UISliderUIScrollViewのスクロールに
合わせてブラー画像を滑らかに表示することも可能になります。

最後に

このようにして、容易にブラーエフェクトを使用することができます。
よりリッチなアプリを作って行きましょう!!