swiftでコマ送りアニメを作る
swiftで画像をアニメーション表示する基本的な方法を書いていきます。今回は4枚の画像をコマ送りさせて表示したいと思います。
1.画像を用意する
コマ送りに使う画像を4枚用意します。jpegでもpngでもOKです。サンプルの画像がテキトーですみません。それぞれの画像にmob1,mob2,mob3,mob4,と名前をつけました。
この4枚の画像をアセットカタログに追加します。アセットカタログとは、異なる解像度の同じ画像や、音声ファイルなどのリソースを管理するツールで、プロジェクトを作成すると、assets.xcassetsという青いフォルダとして作られます。その中に画像をドラッグ&ドロップすると、セットが自動的に作成されます。
上の方法で画像を挿入すると、自動的に画像名のセットが生成されます。セットを開くと「1x」のところに画像が入っているので、これらをすべて「2x」のところにドラッグ&ドロップで移動させます。
画像が準備できたらアプリ画面を作っていきます。
2.Main.storyboardにアウトレット(部品)を配置する
Main.storyboardを開き、imageView1つとボタン2つを下図のように配置します。
そしてアニメーションを開始する左ボタンは「move」、動きを止める右ボタンは「stop」と表示しました。表示する文字の変更は下の手順で行います。
3.imageViewとViewController.swiftを接続する
部品の配置ができたら、それぞれの部品をViewController.swiftと接続します(接続方法の詳細はこちらの5を参照)。
まずimageViewとViewControlle.swiftを2画面表示にします。
imageViewの接続したい部品をクリックして、controlキーを押しながらViewContorollerへとドラッグします。すると部品とつながる青いラインが伸びて、コードを書ける位置にカーソルを持っていくと、ViewContoroller上に入力できる位置を示す青いガイドラインが新たに現れます。
imageViewの接続(アウトレット)のコードは「class〜」と「override func〜」の間に入れましょう。
コードの入力位置を示す青いガイドラインが現れたら、キーボードから手を離します。すると下のようなフキダシが出てくるので、下の欄に名前を入力します。右下にある「Connect」をクリックしたら自動的にコードが表示されます。
次に2つのボタンを接続します。ボタンの接続(アクション)は、ViewControllerの下の方に配置します。
フキダシが出たら部品名を入力し、2つ下の「Event」が「Touch Up Inside(ボタンを押した時に動作する)」になっていることを確認してConnectをクリックします。
これで接続ができました。下のように、接続した部品の行の番号が◉に変わっていればOKです。
4.コードを書き加える
接続ができたら、imageViewを閉じてViewControllerを1画面で開き、コードを書き込んでいきます。
まず「override func〜」に続く{ }のなかに、下のように書き加えてください。これは「初期画面で"mob1"という画像ファイルがimageViewに表示される」というコードです。
override func viewDidLoad() {
super.viewDidLoad()
imageView.image = UIImage(named: "mob1")
}
次はボタンのプログラムです。
startButtonの { } の中に、下のようなコードを書き加えましょう。ボタンを押したら、"mob1","mob2","mob3","mob4"の4枚の画像が1秒間にコマ送りで表示されるというプログラムです。
@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() //コマ送りを停止する
}
}
この記事が気に入ったらサポートをしてみませんか?