[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

一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。


TECH ACADEMY
自宅にいながら1時間でプログラミング基礎を習得

こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン



とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約20,000名の受講生と300社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


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


シェアする

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

フォローする