ボタンにアニメーションをつける
こんにちは！大阪日A iPhoneコースに通っているニンセイです！
今回は、SwiftでUIButtonにアニメーションをつける方法についてこの記事で説明してきたいと思います。
初めて記事を書くので見にくいかもしれませんが是非最後まで見て、チャレンジしてみてください！
まず、今回作るプログラムの完成品を見てみましょう！
環境
xcode:15.4
ios:17.5
swift:5.1.0
macOS:Sonoma 14.5
今回ボタンをアニメーションさせるために使うコードについての説明（公式）
UIButton.animate(withDuration: 0.1, animations: {
self.testbutton.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
})
※一番上の行にあるwithDurationの後ろの数値はアニメーションを実行する秒数を表します。今回は0.1秒にします。
※２行目にあるtestbuttonは関連付けした時のボタン名です。
※２行目にあるscaleXは横の変化後のサイズを表します（元のサイズを１とする）
※２行目にあるY（scaleXの後にある）は縦の変化後のサイズを表します（元のサイズを１とする）
プログラムを組むときの方針
今回作るプログラムのフローチャート
ボタンが指に触れた→Touch Downを用いる（@IBAction）
ボタンから指を離した→Touch Up Insideを用いる（@IBAction）
ボタン内からボタン外へ指が動かされた（スライドされた）→Touch Drag Outsideを用いる（@IBAction）
コードを書く内容
・ボタンがタッチされた瞬間ボタンの拡大または縮小アニメーションを実行する。
・ボタンから指が離れた瞬間元のサイズに戻すアニメーション（大きさ：１）を実行する。
・ボタンをタッチした状態でボタン範囲外にスライドされた瞬間元のサイズに戻すアニメーション（大きさ：１）を実行する。[1]
プログラムを作成
手順1：画面のレイアウトを作成
まずは、プロジェクトを立ち上げましょう
今回はProductname（プロジェクト名）をbuttonanimationtestとします。
そしたら左部分にあるMainを選択し、画面のレイアウトを作っていきます。今回は実験用にボタンを３つ用意します。
※今回はbutton1にはアニメーションなし、button2には大きくなるアニメーション、button3には小さくなるアニメーションをさせます。
３つボタンを画面上に並べます（背景色をつけないとアニメーションがわかりにくいと思います）
手順２：@IBOutletと@IBActionの設定（関連付け）
次に先ほど配置した３つのボタンを関連付けしてきます。今回は、@IBOutletをボタンごとに１つずつなので３つ、@IBActionをTouch Up InsideとTouch DownとTouch Drag Outsideがそれぞれ必要なので９つ用意します。
※今回はわかりやすいようにボタン名はbutton1,button2,button3にします。
※@IBActionはボタン名+TD,TUI,TDOで表します。
@IBOutlet weak var button1: UIButton!
@IBOutlet weak var button2: UIButton!
@IBOutlet weak var button3: UIButton!
//Touch Down（ボタンを押した瞬間）
@IBAction func button1TD(_ sender: Any) {
}
@IBAction func button2TD(_ sender: Any) {
}
@IBAction func button3TD(_ sender: Any) {
}
//Touch Up Inside（ボタンを離した瞬間）
@IBAction func button1TUI(_ sender: Any) {
}
@IBAction func button2TUI(_ sender: Any) {
}
@IBAction func button3TUI(_ sender: Any) {
}
//Touch Drag Outside（ボタンを押したままスライドしてボタン外に出た場合）
@IBAction func button1TDO(_ sender: Any) {
}
@IBAction func button2TDO(_ sender: Any) {
}
@IBAction func button3TDO(_ sender: Any) {
}
関連付け終わったらこのようになる
手順３：ボタンにアニメーションをつける
最初に説明したアニメーションのコード（公式）を用いるのですが、ちょっぴり工夫することでよりコードの量を少なくでき、綺麗な書き方をすることができる。それは、extensionというものを用いる方法である。extensionはコードを綺麗に書けるだけでなく、同アプリの他の画面でも簡単にextensionで定義したものが使えるという大変優れているものである。
extensionと画面のプログラムを分けるためにextension専用のファイルを用意する。
画面左部分で右クリック（マウスパッドだと２本指でクリック）すると、たくさんの項目が出てくるが、そこからNew File...という項目を選択する。そこからiosのSwift Fileを選択し、名前をextensionとする。
Swift Fileを選択
わかりやすくするために名前をextensionにする
このようになる
extensionファイルを作れたら、ボタンのextensionを作る。
import Foundation
import UIKit
extension UIButton {
}
ボタンのextensionを作れたので、今度はボタンのextensionの中にボタンのサイズを元に戻すアニメーションプログラム、ボタンのサイズを大きくするアニメーションプログラム、ボタンのサイズを小さくするアニメーションプログラムを入れる。[2]
※extension内のそれぞれのプログラム名（func）をnormalanimation(),biganimation(),smallanimation()とする
import Foundation
import UIKit
extension UIButton {
func normalanimation() {
UIButton.animate(withDuration: 0.1, animations: {
self.transform = CGAffineTransform(scaleX: 1, y: 1)
})
}
func biganimation() {
UIButton.animate(withDuration: 0.1, animations: {
self.transform = CGAffineTransform(scaleX: 1.05, y: 1.05)
})
}
func smallanimation() {
UIButton.animate(withDuration: 0.1, animations: {
self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
})
}
}
これでextensionは完成しました！
では最後にこのextensionを用いてボタンにアニメーションをつけていきましょう！
extensionの使い方はボタン名.extensionで用意したfuncなので以下のように使うことができます！
button1.normalanimation()
button2.biganimation()
button3.smallanimation()
これらを踏まえてTouch DownとTouch Up InsideとTouch Drag Outsideに小さくなったり大きくなったりするプログラムを入れていきましょう！
//Touch Down（ボタンを押した瞬間）
@IBAction func button1TD(_ sender: Any) {
}
@IBAction func button2TD(_ sender: Any) {
button2.biganimation()
}
@IBAction func button3TD(_ sender: Any) {
button3.smallanimation()
}
//Touch Up Inside（ボタンを離した瞬間）
@IBAction func button1TUI(_ sender: Any) {
//ボタンを押したときの処理をかく
}
@IBAction func button2TUI(_ sender: Any) {
button2.normalanimation()
//ボタンを押したときの処理をかく（アニメーション以外も）
}
@IBAction func button3TUI(_ sender: Any) {
button3.normalanimation()
//ボタンを押したときの処理をかく（アニメーション以外も）
}
//Touch Drag Outside（ボタンを押したままスライドしてボタン外に出た場合）
@IBAction func button1TDO(_ sender: Any) {
}
@IBAction func button2TDO(_ sender: Any) {
button2.normalanimation()
}
@IBAction func button3TDO(_ sender: Any) {
button3.normalanimation()
}
最後に実行
最後に左上にある▶︎を押します（またはcommand+Rまたはcommand+B）
実行してみたら最初にあった動画通り動いたら成功です！
これでボタンのアニメーションの完成です！お疲れ様でした！
最後に全体のプログラムを載せておきます。
//ファイル：ViewController
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button1: UIButton!
@IBOutlet weak var button2: UIButton!
@IBOutlet weak var button3: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
//Touch Down（ボタンを押した瞬間）
@IBAction func button1TD(_ sender: Any) {
}
@IBAction func button2TD(_ sender: Any) {
button2.biganimation()
}
@IBAction func button3TD(_ sender: Any) {
button3.smallanimation()
}
//Touch Up Inside（ボタンを離した瞬間）
@IBAction func button1TUI(_ sender: Any) {
//ボタンを押したときの処理をかく
}
@IBAction func button2TUI(_ sender: Any) {
button2.normalanimation()
//ボタンを押したときの処理をかく（アニメーション以外も）
}
@IBAction func button3TUI(_ sender: Any) {
button3.normalanimation()
//ボタンを押したときの処理をかく（アニメーション以外も）
}
//Touch Drag Outside（ボタンを押したままスライドしてボタン外に出た場合）
@IBAction func button1TDO(_ sender: Any) {
}
@IBAction func button2TDO(_ sender: Any) {
button2.normalanimation()
}
@IBAction func button3TDO(_ sender: Any) {
button3.normalanimation()
}
}
//ファイル：extension
import Foundation
import UIKit
extension UIButton {
func normalanimation() {
UIButton.animate(withDuration: 0.1, animations: {
self.transform = CGAffineTransform(scaleX: 1, y: 1)
})
}
func biganimation() {
UIButton.animate(withDuration: 0.1, animations: {
self.transform = CGAffineTransform(scaleX: 1.05, y: 1.05)
})
}
func smallanimation() {
UIButton.animate(withDuration: 0.1, animations: {
self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
})
}
}
Discussion