swiftで画像をアニメーション表示する基本的な方法を書いていきます。今回は4枚の画像をコマ送りさせて表示したいと思います。

1.画像を用意する

コマ送りに使う画像を4枚用意します。jpegでもpngでもOKです。サンプルの画像がテキトーですみません。それぞれの画像にmob1,mob2,mob3,mob4,と名前をつけました。

この4枚の画像をアセットカタログに追加します。アセットカタログとは、異なる解像度の同じ画像や、音声ファイルなどのリソースを管理するツールで、プロジェクトを作成すると、assets.xcassetsという青いフォルダとして作られます。その中に画像をドラッグ＆ドロップすると、セットが自動的に作成されます。

上の方法で画像を挿入すると、自動的に画像名のセットが生成されます。セットを開くと「１x」のところに画像が入っているので、これらをすべて「2x」のところにドラッグ＆ドロップで移動させます。

画像が準備できたらアプリ画面を作っていきます。

2.Main.storyboardにアウトレット（部品）を配置する

Main.storyboardを開き、imageView1つとボタン2つを下図のように配置します。

そしてアニメーションを開始する左ボタンは「move」、動きを止める右ボタンは「stop」と表示しました。表示する文字の変更は下の手順で行います。

3.imageViewとViewController.swiftを接続する

部品の配置ができたら、それぞれの部品をViewController.swiftと接続します（接続方法の詳細はこちらの5を参照）。

まずimageViewとViewControlle.swiftを２画面表示にします。

imageViewの接続したい部品をクリックして、controlキーを押しながらViewContorollerへとドラッグします。すると部品とつながる青いラインが伸びて、コードを書ける位置にカーソルを持っていくと、ViewContoroller上に入力できる位置を示す青いガイドラインが新たに現れます。

imageViewの接続（アウトレット）のコードは「class〜」と「override func〜」の間に入れましょう。

コードの入力位置を示す青いガイドラインが現れたら、キーボードから手を離します。すると下のようなフキダシが出てくるので、下の欄に名前を入力します。右下にある「Connect」をクリックしたら自動的にコードが表示されます。

次に2つのボタンを接続します。ボタンの接続（アクション）は、ViewControllerの下の方に配置します。

フキダシが出たら部品名を入力し、2つ下の「Event」が「Touch Up Inside（ボタンを押した時に動作する）」になっていることを確認してConnectをクリックします。

これで接続ができました。下のように、接続した部品の行の番号が◉に変わっていればOKです。

4.コードを書き加える

接続ができたら、imageViewを閉じてViewControllerを１画面で開き、コードを書き込んでいきます。

まず「override func〜」に続く{　}のなかに、下のように書き加えてください。これは「初期画面で"mob1"という画像ファイルがimageViewに表示される」というコードです。

    override func viewDidLoad() {
       super.viewDidLoad()
      imageView.image = UIImage(named: "mob1")
   }
​

次はボタンのプログラムです。

startButtonの { } の中に、下のようなコードを書き加えましょう。ボタンを押したら、"mob1","mob2","mob3","mob4"の4枚の画像が１秒間にコマ送りで表示されるというプログラムです。

    @IBAction func startButton(_ sender: Any) {
       imageView.animationImages =
           [UIImage(named:"mob1"),
            UIImage(named:"mob2"),
            UIImage(named:"mob3"),
            UIImage(named:"mob4")!]as? [UIImage] //使用する画像を配列で用意する
       imageView.animationDuration =  1  //画像のコマ送りの時間を設定
       imageView.startAnimating()  //コマ送りを開始する
   }

stopButtonの方は下のコードです。これでボタンを押したらアニメーションがストップします。

    @IBAction func stopButton(_ sender: Any) {
       imageView.stopAnimating()
   }

iPhoneにビルドしたらこのように動きます。

画像の数を増やしたりコマ送りの時間を調整したりして、想定に近い動きになるよう色々試してみましょう。

ViewController.swiftのコードは以下の通りです。

import UIKit
class ViewController: UIViewController {
   
   @IBOutlet weak var imageView: UIImageView!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       imageView.image = UIImage(named: "mob1")
   }
   @IBAction func startButton(_ sender: Any) {
               imageView.animationImages =
                   [UIImage(named:"mob1"),
                    UIImage(named:"mob2"),
                    UIImage(named:"mob3"),
                    UIImage(named:"mob4")!]as? [UIImage] //使用する画像を配列で用意する
               imageView.animationDuration =  1  //画像のコマ送りの時間を設定
               imageView.startAnimating()  //コマ送りを開始する
   }
   
   @IBAction func stopButton(_ sender: Any) {
               imageView.stopAnimating()  //コマ送りを停止する
   }
}