画像を表示する際にモアレ(干渉縞)を抑制する方法

概要

iOSアプリでUIImageViewを使用して画像を表示する際に、モアレが発生することを回避する為の方法を記載します。

モアレとは

モアレまたはモワレ（仏: moiré）は、干渉縞ともいい、規則正しい繰り返し模様を複数重ね合わせた時に、それらの周期のずれにより視覚的に発生する縞模様のことである。
また、規則正しい模様を、デジタル写真などのビットマップ画像にした場合も、画像の画素解像度と模様の周波数のずれが原因で同様の縞模様が発生するがこれもモアレと呼ぶ。
　
wikipediaより引用

上記の画像2つを見比べて頂けるとわかりやすいかと思いますが、
左側の画像が元画像で、右側の画像がモアレが発生している状態の画像です。

どのような場合に起こりうるか

モアレが発生しやすい上記のようなパターンの画像を本来の画像サイズよりも小さいサイズのUIImageViewで表示で表示するだけで容易に発生します。
(本来のサイズよりも小さい程に発生しやすい)

回避方法

UIImageViewのlayer.minificationFilterに kCAFilterTrilinear を設定することでモアレを発生させることなく画像表示が可能です。

sample

extension UIImageView {
    override open func awakeFromNib() {
        super.awakeFromNib()

        self.layer.minificationFilter = kCAFilterTrilinear
    }
}

ドキュメント： minificationFilter

設定可能な縮小フィルタ

• kCAFilterLinear：線形補間
• kCAFilterNearest：近傍補間
• kCAFilterTrilinear：トリリニア補間

おわりに

UIImageViewやUIImageの設定を探し回り結果CALayerでの設定でした。
画像コンテンツをメインで扱うようなアプリでは設定を検討してみては如何でしょうか。
誤りなどありましたら、コメント/編集リクエスト頂けると助かります。