post Image
Swiftで連番画像のコマ送りアニメーション

概要

Swiftのみを利用してコマ送りアニメーションを実装しました。
その際にソースの冗長性をなるべく軽減してみました。
もし、画像が何百枚もあったら大変なので…
環境は Xcode8.3,Swift3.1です。

完成イメージ

sample.gif
ボタン押すことでアクションします。

作り方

1. 画像の準備

前提として、画像は連番のものを使用してください。(例 image01.png, image02,png…など)今回は、以下のリンクのフリー素材を使用させていたただきました。
http://www.pixiv.net/member_illust.php?mode=medium&illust_id=62121228

2. 素材の配置

ImageViewとButtonを配置
今回は動作が2種類あるので、アクションを起こすボタンを2つ配置してます。
この辺は用意した画像に合わせて臨機応変に…
スクリーンショット 2017-04-05 23.08.30.png

3. 接続

ImageViewの接続

通常時の立ち絵を設定し、charaImageとしてOutlet接続します。

スクリーンショット 2017-04-05 23.35.03.png

Buttonの接続

左のButtonはActionで接続します。名前はattackBtnとします。

スクリーンショット 2017-04-05 23.44.43.png

右のButtonの名前はdownAttackBtnとして接続します。

スクリーンショット 2017-04-05 23.45.25.png

以上で見た目に関する準備は終わりました。あとはコードを書いていくだけです。

4. コードを書く

下記のようにコードを書いていきます。もしImageViewとButtonを違った名前で接続しているのならば、それに合わせて書いてください。

ポイントは、画像を入れる配列を作っておき、viewDidLoad() でループを利用してまとめて配列に格納することです。こうすれば、例え画像が100枚だろうと1000枚だろうと短いコードで格納できます。好みによっては関数化してもいいと思います。
imageArrayAttack.count+1としている理由は今回使用している連番画像の番号が01からだからです。
もし自分で用意した画像が0から始まる場合は、imageArrayAttack.countでかまいません。

ViewController.swift
import UIKit

class ViewController: UIViewController {

    // キャラ表示用のUIImageView
    @IBOutlet weak var charaImage: UIImageView!

    // 立ち攻撃用配列
    var imageArrayAttack : Array<UIImage> = []
    // しゃがみ攻撃用配列
    var imageArrayDownAttack : Array<UIImage> = []

    override func viewDidLoad() {
        super.viewDidLoad()

        // 立ち攻撃の画像を配列に格納
        while let attackImage = UIImage(named: "attack0\(imageArrayAttack.count+1)") {
            imageArrayAttack.append(attackImage)
        }
        // しゃがみ攻撃の画像を配列に格納
        while let downAtackImage = UIImage(named: "downAttack0\(imageArrayDownAttack.count+1)") {
            imageArrayDownAttack.append(downAtackImage)
        }

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }

    @IBAction func attackBtn(_ sender: Any) {
        // アニメーションの適用
        charaImage.animationImages = imageArrayAttack
        // 1.5秒間隔
        charaImage.animationDuration = 0.5
        // 1回繰り返し
        charaImage.animationRepeatCount = 1
        // アニメーションを開始
        charaImage.startAnimating()
    }

    @IBAction func downAttackBtn(_ sender: Any) {
        // アニメーションの適用
        charaImage.animationImages = imageArrayDownAttack
        // 0.5秒間隔
        charaImage.animationDuration = 0.5
        // 1回繰り返し
        charaImage.animationRepeatCount = 1
        // アニメーションを開始
        charaImage.startAnimating()
    }
}

5. まとめ

ループを利用して短くエレガントなコードにしました。
gitにプロジェクトをアップロードしておきます。
https://github.com/tomoyukiHAYAKAWA/animationSample


『 Swift 』Article List