うるおいらんど
アイキャッチ画像

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

追記があります。

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

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

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

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

※こちらのやり方は非推奨です。「【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を0に設定することで初期化

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=π (180度)

M_PI_2 =π/2 (90度)

M_PI_4 =π/4  (45度)

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にアニメーションにかかる時間を設定します。

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

 

animationsには処理をかきます。

sender.transform = CGAffineTransformMakeRotation(angle)

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

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

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

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

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

sender.transform = CGAffineTransformIdentity

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

 

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

 

注意

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

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

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

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

 

補足: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
        })
    }

Additional Notes追記

このやり方は非推奨らしいです。

【Swift】UIButtonを一回転させるアニメーション【改】の方にSwift4に対応したコードを書いておきました。

よければそちらをご参照ください〜〜。

lowerCamelCaseじゃないと違和感マックス。この時代の記事本当に見てられない・・・。

Comments

コメントはありません。

現在コメントフォームは工事中です。