LoginSignup
6
2

More than 3 years have passed since last update.

APNGKitを利用してiOSでAPNGアニメーションを実装する。

Last updated at Posted at 2020-06-12

こんにちはrenです。
皆様はAPNGというファイル形式をご存知でしょうか?

APNGとはアニメーションするPNG画像のことで、GIFに取って代わる新しい画像形式です!

対象読者

iOSアプリ開発者

APNGを利用するメリット

GIFよりも表現の幅が広い

GIF

  • 256 色まで
  • アルファチャンネルなし(完全な透明か完全な不透明かのいずれかのみ)

APNG

  • フルカラー
  • アルファチャンネルあり(半透明が使える)

使い方

APNGKitというライブラリを利用すると簡単に導入できます!
https://github.com/onevcat/APNGKit

1. APNGKitをインストール

CocoaPods、Carthage、Swift Package Manager などを利用し、ライブラリをインストールします。
今回はSwift Package Managerを利用します。

File -> Swift Package -> Add Package Dependency...
スクリーンショット 2020-03-26 20.00.36.png

APNGKit で検索
スクリーンショット 2020-03-26 19.31.36.png

Versionは適当に設定
スクリーンショット 2020-03-26 19.31.46.png

APNGKit にチェックを入れる
スクリーンショット 2020-03-26 19.32.32.png

こんな感じになっていればOK
スクリーンショット 2020-03-26 19.32.48.png

2. APNGのファイルをプロジェクトに追加

スクリーンショット 2020-03-26 20.11.22.png

3. StorybordにImageViewを作成

スクリーンショット 2020-03-26 19.37.25.png

4. ImageViewをカスタムクラスAPNGImageViewに置き換える

スクリーンショット 2020-03-26 19.37.35.png

5. ViewControllerを下記のように変更


import UIKit

import APNGKit

class ViewController: UIViewController {

    // APNGを表示するためのImageView
    @IBOutlet private weak var imageView: APNGImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupImageView()
    }

    private func setupImageView() {
        // APNGファイルのパスを取得
        guard let path = Bundle.main.path(forResource: "elephant", ofType: "apng") else { return }

        // APNGのファイルを取得
        let image = APNGImage(contentsOfFile: path)

        // imageViewにAPNGを代入
        imageView.image = image

        // アニメーションの実行
        imageView.startAnimating()

    }

}

6. Run!

アニメーションの動画を貼りたかったけど、色々面倒だったので省略

サンプルプロジェクト

6
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2