【Swift】UIButtonを一回転させるアニメーション

今回のアプリの目標の１つに「アニメーションをつけて動きのあるアプリを作る」があります。

まずは簡単〜と思いつつ上手くいくまでに少し時間がかかってしまった回転アニメーションの解説をしていきます。

(完全独学になりますので間違っているところ等がありましたら教えていただけるとありがたいです。)

ボタンをクリックすると画像(ボタン)を一回転させたい！

※こちらのやり方は非推奨です。「【Swift】UIButtonを一回転させるアニメーション【改】」を推奨しています。

ボタンを作成

まずはボタンを作成します

let Btn = UIButton()
let Image = UIImage(named:"image.png")! as UIImage
Btn.frame = CGRectMake(0,0,61,53)
Btn.layer.position = CGPoint(x:self.view.bounds.width * 4.0 / 5.0,y:450.0)
Btn.setImage(Image,forState:.Normal)
tBtn.addTarget(self,action:"BtnAnimation:",forControlEvents:.TouchUpInside)
view.addSubview(Btn)

私はいつも関数を作ってからviewDidLoadの中に配置しています。

override func viewDidLoad() {
        super.viewDidLoad()
        BtnFunc()
}
func BtnFunc(){
        let Btn = UIButton()
        let Image = UIImage(named:"image.png")! as UIImage
        Btn.frame = CGRectMake(0,0,61,53)
        Btn.layer.position = CGPoint(x:self.view.bounds.width * 4.0 / 5.0,y:450.0)
        Btn.setImage(Image,forState:.Normal)
        Btn.addTarget(self,action:"BtnAnimation:",forControlEvents:.TouchUpInside)
        view.addSubview(Btn)
}

こうすることでviewDidLoad内がすっきりするので好きです。

ボタンタップ時に回転アニメーションをつける

回転アニメーションをつけていきます。

こちらのサイトを参考にさせていただきました！

069 UIViewアニメーションまとめ

Objective-Cでの画像の回転

まずはボタンアクション時の関数を作っておきます

func BtnAnimation(sender:UIButton){
//この中にボタンタップ時のイベントを書いていく
}

CGAffineTransformMakeRotationを０に設定することで初期化

sender.transform = CGAffineTransformMakeRotation(0)

ラジアンで回転角度を指定します

//回転角度を180度に設定
let angle:CGFloat = CGFloat(M_PI)

ラジアンについての補足

ここで補足ですがラジアンを設定するときのM_PIという値の説明をしておきます。

M_PIは円周率を表す定数です。つまりはπ。

細かい値を設定するときにはこちらを用いて計算式を書けばOKです

//回転角度を45度に設定
let angle:CGFloat = CGFloat(45 * M_PI / 180)

ちなみによく使う値はこのように定められています

M_PI=π　(１８０度)

M_PI_2 =π/2　（９０度）

M_PI_4 =π/4　　（４５度）

M_1_PI=1/π

M_2_PI=2/π

こちらのサイトを御覧ください〜

Objective-C／関数　-iPhoneアプリ開発の虎の巻

秒数を指定して画像を回転させる

回転角度を決めたらアニメーションの秒数を設定します

UIView.animateWithDuration(
　　　　duration: 1.0, // アニメーションの時間
　　　　animations: {() -> Void  in
                 // アニメーションする処理
        },
        completion: { (Bool) -> Void in
                 //アニメーション後にする処理
        }
)

animateWithDurationのdurationにアニメーションにかかる時間を設定します。

今回は１秒で回転するアニメーションです。

animationsには処理をかきます。

sender.transform = CGAffineTransformMakeRotation(angle)

こちらはボタンをangle度だけ回転させる、という意味です。

今回は180度までこれで回転させます。

ちなみにここでangleを360度に設定しても一回転しません。というか動きません。

あくまで180度まで持っていくよ〜というだけ。

そこから一回転する(元に戻る)ために０まで戻る必要があります。

sender.transform = CGAffineTransformIdentity

このように書くと１回転します。

デモ版が載せ方がわからないので割愛させていただきます。わかり次第画像置いておきます〜

注意

まず一回転のアニメーションをさせる際に180度まで回転させてから０に戻しています。

これは90度から０に戻したり、270度から0に戻したり等では上手く動きません。

180度から０に戻すときにだけ上手く挙動します。

(仕組みをよくわかっていないので原因は不明です。ごめんなさい；；)

補足:iOS7上ではうまく回転しませんでした。。。(2015/12/5)

さらに補足：「【Swift】UIButtonを一回転させるアニメーション【改】」にてiOS7にも対応したやり方を書かせて頂きました。iOS8,9でもこちらのやり方を推奨しています。(2016/1/14)

全体のコード

override func viewDidLoad() {
        super.viewDidLoad()
        BtnFunc()
}
func BtnFunc(){
        let Btn = UIButton()
        let Image = UIImage(named:"image.png")! as UIImage
        Btn.frame = CGRectMake(0,0,61,53)
        Btn.layer.position = CGPoint(x:self.view.bounds.width * 4.0 / 5.0,y:450.0)
        Btn.setImage(Image,forState:.Normal)
        Btn.addTarget(self,action:"BtnAnimation:",forControlEvents:.TouchUpInside)
        view.addSubview(Btn)
}    
func BtnAnimation(sender:UIButton){
        // 初期化.
        sender.transform = CGAffineTransformMakeRotation(0)
        
        // radianで回転角度を指定(180度).
        let angle:CGFloat = CGFloat(M_PI)
        
        // アニメーションの秒数を設定(1秒).
        UIView.animateWithDuration(1.0,
            
            animations: { () -> Void in
                
                // 回転用のアフィン行列を生成.
                sender.transform = CGAffineTransformMakeRotation(angle)
                sender.transform = CGAffineTransformIdentity
            },
            completion: { (Bool) -> Void in
        })
    }