[iPhone] UIImageViewアニメーション(パラパラ漫画)

UIImageViewは画像を扱うクラスですが、簡単にパラパラ漫画的なアニメーションもできます。尚、円弧をアニメーションさせるような場合にはCAShapeLayerクラスを使います。

Xcode 13.4.1

UIImageView で（パラパラ）アニメメーション

一枚一枚の画像を一定間隔で表示させてパラパラ漫画的に動画のように見えるようにする方法です。
本格的なアニメーションは別のAPIを使うほうがいいのですが、手軽に簡単にやりたい場合はUIImageViewの機能を使うこともできます。

目次
1. ぱらぱらアニメの手順
2. サンプルコード
3. storyboardの設定
4. サンプル動画

ぱらぱらアニメの手順

構成としてはUIImageのArrayを作り、それに画像を一つづつ割り当てます。

// UIImage の配列を作る
var imageListArray :Array<UIImage> = []

// 画像からUIImageのインスタンスを生成
let image1 = UIImage(named:"cat_1")!
let image2 = UIImage(named:"cat_2")!
…

// UIImage 各要素を追加
imageListArray.append(image1)
imageListArray.append(image2)
…

// UIImage の配列を作る

var imageListArray :Array<UIImage> = []

// 画像からUIImageのインスタンスを生成

let image1 = UIImage(named:"cat_1")!

let image2 = UIImage(named:"cat_2")!

…

// UIImage 各要素を追加

imageListArray.append(image1)

imageListArray.append(image2)

…

UIImageViewのインスタンスを生成して、animationImagesメソッドを使ってUIImage のArrayを設定していきます。

// UIImageViewのインスタンス
let imageView:UIImageView = UIImageView(image:image1)

…

// 画像Arrayをアニメーションにセット
imageView.animationImages = imageListArray

// 間隔（秒単位）
imageView.animationDuration = 3

// 繰り返し、0 は無限ループ
imageView.animationRepeatCount = 1

// アニメーションを開始
imageView.startAnimating()

// アニメーションを終了
imageView.stopAnimating()

// UIImageViewのインスタンス

let imageView:UIImageView = UIImageView(image:image1)

…

// 画像Arrayをアニメーションにセット

imageView.animationImages = imageListArray

// 間隔（秒単位）

imageView.animationDuration = 3

// 繰り返し、0 は無限ループ

imageView.animationRepeatCount = 1

// アニメーションを開始

imageView.startAnimating()

// アニメーションを終了

imageView.stopAnimating()

サンプルコード

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 画面背景を設定してみました
        self.view.backgroundColor = UIColor(red:0.44,green:0.41,blue:0.36,alpha:1.0)
    }

    // ボタンをタップしてanimation開始
    @IBAction func start(_ sender: Any) {
        // アニメーション用の画像
        let image1 = UIImage(named:"cat_1")!
        let image2 = UIImage(named:"cat_2")!
        let image3 = UIImage(named:"cat_3")!
        let image4 = UIImage(named:"cat_4")!

        // UIImage の配列を作る
        var imageListArray :Array<UIImage> = []
        // UIImage 各要素を追加、ちょっと冗長的ですが…
        imageListArray.append(image1)
        imageListArray.append(image2)
        imageListArray.append(image3)
        imageListArray.append(image4)


        // 画面スクリーンサイズ
        let screenWidth = self.view.bounds.width
        let screenHeight = self.view.bounds.height

        // 画像のサイズ
        let imageWidth = image1.size.width
        let imageHeight = image1.size.height

        // UIImageView のインスタンス生成,ダミーでimage1を指定
        let imageView:UIImageView = UIImageView(image:image1)

        // 画像サイズからImageViewの大きさを設定していく
        let rect = CGRect(x:0,
                          y:0,
                          width:imageWidth,
                          height:imageHeight )

        imageView.frame = rect

        // 画像が画面中央にくるように位置合わせ
        imageView.center = CGPoint(x:screenWidth/2, y:screenHeight/2)

        // view に追加する
        self.view.addSubview(imageView)

        // 画像Arrayをアニメーションにセット
        imageView.animationImages = imageListArray

        // 間隔（秒単位）
        imageView.animationDuration = 3
        // 繰り返し
        imageView.animationRepeatCount = 1

        // アニメーションを開始
        imageView.startAnimating()

        // アニメーションを終了
        //imageView.stopAnimating()

    }

}

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {

super.viewDidLoad()

// 画面背景を設定してみました

self.view.backgroundColor = UIColor(red:0.44,green:0.41,blue:0.36,alpha:1.0)

}

// ボタンをタップしてanimation開始

@IBAction func start(_ sender: Any) {

// アニメーション用の画像

let image1 = UIImage(named:"cat_1")!

let image2 = UIImage(named:"cat_2")!

let image3 = UIImage(named:"cat_3")!

let image4 = UIImage(named:"cat_4")!

// UIImage の配列を作る

var imageListArray :Array<UIImage> = []

// UIImage 各要素を追加、ちょっと冗長的ですが…

imageListArray.append(image1)

imageListArray.append(image2)

imageListArray.append(image3)

imageListArray.append(image4)

// 画面スクリーンサイズ

let screenWidth = self.view.bounds.width

let screenHeight = self.view.bounds.height

// 画像のサイズ

let imageWidth = image1.size.width

let imageHeight = image1.size.height

// UIImageView のインスタンス生成,ダミーでimage1を指定

let imageView:UIImageView = UIImageView(image:image1)

// 画像サイズからImageViewの大きさを設定していく

let rect = CGRect(x:0,

y:0,

width:imageWidth,

height:imageHeight )

imageView.frame = rect

// 画像が画面中央にくるように位置合わせ

imageView.center = CGPoint(x:screenWidth/2, y:screenHeight/2)

// view に追加する

self.view.addSubview(imageView)

// 画像Arrayをアニメーションにセット

imageView.animationImages = imageListArray

// 間隔（秒単位）

imageView.animationDuration = 3

// 繰り返し

imageView.animationRepeatCount = 1

// アニメーションを開始

imageView.startAnimating()

// アニメーションを終了

//imageView.stopAnimating()

}

storyboardの設定

@2xのRetina対応にした画像 cat_1@2x.jpg, cat_2@2x.jpg, …
これらをAssetsに入れます。

Main にボタンを置き、背景色など適当に入れてボタンアクションの
start(_ sender: Any)
と「Touch up Inside」で紐付けします。

サンプル動画

画像をクリックしてください、パラパラ漫画になりました。