[iPhone] CALayer 画像をぼかす、モザイク化する (Objective-C)

CALayerを使うと画像のぼかしやモザイクを作ることができます。
 

Objective-C
Xcode 9.4

 

CALayer

 
CALayer の CA は Core Animationのことでアニメーションの画像処理系の重い処理に適しています。またUIViewと被っているような気もするのですが、その差は
CALayer
‘The CALayer class manages image-based content and allows you to perform animations on that content.’
 
アニメーション的な事はこちらが使いやすいということのようです
 
UIView
‘The UIView class defines a rectangular area on the screen and the interfaces for managing the content in that area.’
 
描画する領域について色々定義しているということでしょうか
 

画像をぼかし、モザイク化

 
まず、ラスタライズ化を設定します。これはベクター形式などの画像データをBMPのようなピクセル、ドットに置き換えることです。
imageView.layer.shouldRasterize = YES;
ラスタライズのスケールを設定します。
imageView.layer.rasterizationScale = 0.1;
 
これで、それなりの画像のぼけを出せます。


 
結果は
 
calayer_1
 


 
これは画像を縮小したものを拡大したらできるようです
実際にオーソドックスに画像を1/10にしてから10倍に拡大して見ました。
 


 
サンプリングが異なっているのかもしれませんが、
ぼけたモザイクっぽくなりました。
 
calayer_6
 
コード量は圧倒的に多いですが。
 


 
元にもどって、先ほどの画像は粗いので、これをローパスフィルターをかけるとぼやけた感がでてきます。スケーリングフィルターには3種類あり

  1. kCAFilterLinear (default)
    • いわゆる線形補間で2点間を結んだ線上に中間データを想定する
  2. kCAFilterNearest
    • 近傍補間は、近傍の4点の元データから目的のデータを計算する
  3. kCAFilterTrilinear
    • トリ・リニア補間は近傍補間に更にミニマップを追加した8点補間

この kCAFilterTrilinear を minificationFilter に追加すると
 
imageView.layer.minificationFilter = kCAFilterTrilinear;
 
calayer_2
 
となります。
 
先ほどのラスタライズのスケールを変更するとぼやけ感が変わります。
mageView.layer.rasterizationScale = 0.2;
 
calayer_3
 
また拡大する時の magnificationFilter に kCAFilterNearest を追加すると
imageView.layer.magnificationFilter= kCAFilterNearest;
 
calayer_4
 
モザイクになりました。
 
コードは下のようになります。
QuartzCore.framewark の追加を忘れずに
ViewController.m


 

アニメーションにする

 
モザイク画からフェードインするような演出を作ります。
 
rasterizationScale をキーにして CABasicAnimation のインスタンスを生成
duration でアニメーション期間を設定して、その間の開始と終了時のキー値を入れます。
imageView.layer に追加する
コードは以下のようになります。
 
ViewController.m


 
calayer_4
アニメーション5秒…
 

お疲れさま

お疲れさまでした

 
Swiftでは

画像をぼかす、モザイク化するにはどうすればいいでしょうか。UIGraphicsBeginImageContextを使ったやり方やCALaye...
アニメーションは処理が重いのですがCABasicAnimationを使うと比較的スムーズな動きを出せます。こちらで画像のモザイクを試しました...

 
Reference:
CABasicAnimation – Core Animation | Apple Developer Documentation


誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

  • このエントリーをはてなブックマークに追加

フォローする