スポンサーリンク

iOS開発

たった3行で書ける、iPhoneでお手軽ガウシアンフィルタ

たった3行で書ける、iPhoneでお手軽ガウシアンフィルタ

特別なライブラリやカテゴリを使わなくても、iOS標準のフレームワークだけで、超簡単にガウシアンフィルタ(ぼかし効果)をかけるテクニックを紹介します。
この方法を応用すれば、ごく短いコードで、さらにモザイクフィルタや、アニメーションにまで使えてしまう優れモノです。

例えば、UIImageViewにフィルタをかけると、このような結果になります。
■実行前
20130120_1

■実行後
20130120_2
しっかりと、ぼかしが効いているのが分かります。

このぼかし効果は、CALayerのプロパティを組み合わせて実現しています。
その基本コードが、こちらです。

たった3行のコードで実装できてしまいました。

何をやっているのか?

さて、この3行のコードで、どうやって画像をぼかしているのかというと、
UIImageViewのレイヤーを、一度縮小してから、ラスタライズ(ビットマップ化)しているのです。

画像を縮小すると輪郭がつぶれていく →
小さくなった画像を元の大きさで表示する → 結果的に画像がボケる
という理屈です。
手軽にぼかし効果を加えるために、一度縮小してから拡大する、というのは、
画像を扱うプログラムでは、わりとよく使われるテクニックです。

  • CALayer.shouldRasterize: レイヤーの合成前にラスタライズする
  • CALayer.rasterizationScale: レイヤーをラスタライズする際の拡大縮小率
  • CALayer.minificationFilter: レイヤーを縮小する際のフィルタ

縮小時に、小さくすればするほど画像が潰れていきますので、
結果として、縮小率が高いほど、ぼけ具合が強くなっていきます。

■倍率 0.5
倍率 0.5

■倍率 0.25
倍率 0.25

■倍率 0.1
倍率 0.1

■倍率 0.02
倍率 0.02

コードを書く際の注意点として、CALayerを使うために QuartzCore/QuartzCore.h が必要です。
また、minificationFilter の設定は、書いていなくても近い動作はするのですが、
縮小時のクオリティを保つために、ここでは kCAFilterTrilinear を指定しています。

画像以外にも使える

CALayerのプロパティを使ってフィルタ効果を実現しているということは、
画像(UIImageView)でなくとも、UIViewを親とするすべてのUI部品で、同じことができるということです。
同じ方法で、文字やボタン、画面全体など、なんでも簡単にぼかすことができます。

■文字(UILabel)にガウシアンフィルタ
20130120_3

20130120_4

応用1.「モザイク加工」も超簡単!

このテクニックを応用して、このようなモザイク加工だって簡単にできてしまいます。
20130120_5

ガウシアンフィルタの基本コードに、1行加えるだけ。

magnificationFilterというプロパティを追加しました。これは、拡大時に使用されるフィルタを設定するためのプロパティです。
一度縮小した画像を、元のサイズに拡大する際のフィルタに、ニアレストネイバーという種類を使うことで、モザイクがかかったような効果を作ることが可能です。

応用2. アニメーションだって超簡単!

このテクニックの素晴らしいところは、レイヤープロパティを操作して実現しているため、
ぼかし加工をレイヤーアニメーションとして、簡単に動かすことができる点です。

実際に、.Sched 3というiPhoneアプリでは、このテクニックを使用して、
「メニュー表示の際に、背景をぼかす」というアニメーションを実装しているそうです。
.Sched 3 で予定をタップした時の背景をぼかすアニメーションの実装方法

.Sched 3のプロモーション動画にも、ぼかしアニメーションが登場しています。
(0:12秒、0:35秒、0:45秒付近)

ジワっとぼかしが入ったり消えたりするアニメーションは、とてもカッコいいです。

このテクニックは、ほとんどのUI部品に使えて、アニメーションも手軽に作れるので、
アイデア次第で、いろいろと面白いUIが作れそうですね。

サンプルコード

※このエントリーで作成したサンプルコードはこちら。
https://github.com/Nouris-Inc/Sample-EasyGaussianBlur
https://github.com/Nouris-Inc/Sample-EasyGaussianBlur/tree/animation-test
20130120_9

【参考】

以下のサイトを参考にさせていただきました。ありがとうございます。
How to implement a box or gaussian blur on iPhone
CALayer Class Reference
kCAFilteNearest – 無為空間
iOS UIImageView scaling image down produces aliased image on iPad 2

スポンサーリンク