UIButtonを押した時に簡単なアニメーションをつけてみる

UIButtonをにSpinnerを表示しボタンを大きくした後に、元のサイズに戻すというアニメーションを作成してみます。

animateWithDurationメソッドのみで、以下のようなアニメーションを作成できます。

このアニメーション部分は、このようになります。

let b = self.myButton.bounds
UIView.animateWithDuration(1.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 20, options: nil, animations: {
        // ボタンサイズの変更
        self.myButton.bounds = CGRectMake(b.origin.x - 20, b.origin.y, b.size.width + 80, b.size.height)
        // ボタンカラーの変更
        self.myButton.backgroundColor = UIColor(red: 0.85, green: 0.83, blue: 0.45, alpha: 1.0)
        // spinnerのalpha値を変更して表示
        self.spinner.alpha = 1.0
        // spinnerの位置を設定
        self.spinner.center = CGPointMake(40, self.myButton.frame.size.height / 2)
    }, completion: nil)

UIView.animateWithDuration(1.0, delay: 1.3, usingSpringWithDamping: 0.2, initialSpringVelocity: 20, options: nil, animations: {
        // ボタンサイズを元に戻す
        self.myButton.bounds = CGRectMake(b.origin.x, b.origin.y, b.size.width, b.size.height)
        // ボタンカラーを元に戻す
        self.myButton.backgroundColor = UIColor.blueColor()
        // spinnerを非表示に
        self.spinner.alpha = 0.0
    }, completion: nil)

ここでは、ボタンを大きくするアニメーションを最初に実行して、そこから1.3秒後にボタンを小さくするアニメーションを実行しています。
animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion: を使うことでバネっぽいアニメーションを実現できます。
メソッドの説明は、【iOS7】ばねっぽいアニメーションを実現するUIViewの新メソッドがとても参考になります。

ソースの全文は以下のようになります。

import UIKit

class ViewController: UIViewController {
    
    let myButton: UIButton = UIButton()
    let spinner = UIActivityIndicatorView(activityIndicatorStyle: .WhiteLarge)

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // サイズを設定する.
        myButton.frame = CGRectMake(0,0,200,40)
        
        // 背景色を設定する.
        myButton.backgroundColor = UIColor.blueColor()
        
        // 枠を丸くする.
        myButton.layer.masksToBounds = true
        
         // タイトルを設定する(通常時).
        myButton.setTitle("Click Me", forState: .Normal)
        myButton.setTitleColor(UIColor.whiteColor(), forState: .Normal)
        
        // コーナーの半径を設定する.
        myButton.layer.cornerRadius = 20.0
        
        // ボタンの位置を指定する.
        myButton.layer.position = CGPoint(x: self.view.frame.width/2, y:200)
        
        // タグを設定する.
        myButton.tag = 1
        
        // イベントを追加する.
        myButton.addTarget(self, action: "onClickMyButton:", forControlEvents: .TouchUpInside)
        
        // タイトルを設定する(ボタンがハイライトされた時).
        myButton.setTitle("Pushed!", forState: .Highlighted)
        myButton.setTitleColor(UIColor.blackColor(), forState: .Highlighted)
        
        // ボタンをViewに追加する.
        self.view.addSubview(myButton)
        
        // spinner 追加
        spinner.frame = CGRect(x: -20, y: 6, width: 20, height: 20)
        spinner.startAnimating()
        spinner.alpha = 0.0
        
        myButton.addSubview(spinner)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    /*
    ボタンクリックイベント.
    */
    func onClickMyButton(sender: UIButton) {

        let b = self.myButton.bounds
        UIView.animateWithDuration(1.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 20, options: nil, animations: {
                // ボタンサイズの変更
                self.myButton.bounds = CGRectMake(b.origin.x - 20, b.origin.y, b.size.width + 80, b.size.height)
                // ボタンカラーの変更
                self.myButton.backgroundColor = UIColor(red: 0.85, green: 0.83, blue: 0.45, alpha: 1.0)
                // spinnerのalpha値を変更して表示
                self.spinner.alpha = 1.0
                // spinnerの位置を設定
                self.spinner.center = CGPointMake(40, self.myButton.frame.size.height / 2)
            }, completion: nil)
        
        UIView.animateWithDuration(1.0, delay: 1.3, usingSpringWithDamping: 0.2, initialSpringVelocity: 20, options: nil, animations: {
                // ボタンサイズを元に戻す
                self.myButton.bounds = CGRectMake(b.origin.x, b.origin.y, b.size.width, b.size.height)
                // ボタンカラーを元に戻す
                self.myButton.backgroundColor = UIColor.blueColor()
                // spinnerを非表示に
                self.spinner.alpha = 0.0
            }, completion: nil)
    
    }

}