見出し画像

アニメーションGIFのトリセツ： iOSアプリ編

Deco Calendar


Decoカレンダーの新バージョンでは、アニメーションGIFを着せ替え壁紙で表示させる機能を追加し、「ぴよたそ」さんのキャラクターのひよこがカレンダー画面上を遊び回るといったことができるようになり、表現力が高まった形です。

ところで、このアニメーションGIFの取り扱いについては結構悩むところがあります。iOSもAndroidも標準のImageViewではサポートできておらず、外部ライブラリに依存することになります(ただし、自作するよりも楽です)。

iOSでは、まずUIImageViewに取り込む画像については、画像キャッシュライブラリとしてNukeを使うのが割とメジャーな方法かと思います。しかしながら、NukeそのものだけではアニメーションGIFまではサポートしてはおらず、さらにそのアニメーションGIFの取り扱いをサポートするライブラリが必要になります。

アニメーションGIFを取り扱うライブラリ、その名は、Gifuです。ご丁寧にも”It’s also a prefecture in Japan”と書かれており、そう、岐阜じゃないですか！

このライブラリもSwift Package Managerにて参照できるようにします。これでアニメーションGIFをswiftで取り扱えるようになります。この、NukeとGifuを拡張したライブラリとしてNuke Gifu Pluginが用意されており、これを使ってUIImageViewにアニメーションGIFを落とし込めるようにします。

使い方としては、UIImageViewを継承したGifImageViewを以下のように拡張します。

extension Gifu.GIFImageView {            
    public override func nuke_display(image: UIImage?) {
        prepareForReuse()
        
        // アニメーションGIFかどうかで処理を分ける
        if let data = image?.animatedImageData {
            animate(withGIFData: data)
        } else {
            self.image = image
        }
    }
}

あとはImageViewに画像取り込むタイミングでNuke.loadImage()を呼びます。

 Nuke.loadImage(with: url!,into: imageView)

ソースコードにしてみると、かなり簡単でしたね。でも意外と情報がないです。めんどくささからすれば、iOSもAndroidも簡単なのですが、サーバ側(このサービスではAWSを使ってます)でGIFイメージをresizeするのにハマってしまいました笑。

アプリに興味がありましたら、インストール、よろしくお願いいたします！

この記事が気に入ったらサポートをしてみませんか？