うるおいらんど

アプリ開発やサイト制作のメモとか。

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

魚ライン
魚ライン

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

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

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

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

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

 

ボタンを作成

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

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

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

 

 

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

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

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

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

Objective-Cでの画像の回転

 

 

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

 

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

 

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

 

ラジアンについての補足

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

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

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

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

M_PI=π (180度)

M_PI_2 =π/2 (90度)

M_PI_4 =π/4  (45度)

M_1_PI=1/π

M_2_PI=2/π

 

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

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

 

 

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

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

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

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

 

animationsには処理をかきます。

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

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

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

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

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

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

 

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

 

注意

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

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

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

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

 

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

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

 

全体のコード

 

 

 

 

魚ライン 魚ライン

Swiftの記事一覧を見る

コメント

コメントは認証制です。詳しくは下記の注意をお読みください。

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

魚ライン 魚ライン