hoang.nam

2015.06.04

3Dコインフリップアニメーション

初めまして、アライドアーキテクツのナムです。
現在はBRANDCoの開発を担当しております。

業務ではウェブエンジニアとして働いていますが、Androidに関しても興味を持っており、
今回はAndroidのアニメーションに関することを書いてみようと思います。

Androidアニメーションについて

Androidアニメーションと言えば3つの種類があります、ViewアニメーションとPropertyアニメーションとDrawableアニメーションです。

View Animation

3つの種類の中に一番簡単なアニメーションで、Viewsに基本的なアニメーション(alpha, translate, rotate,…)を行うことができます。

Drawable Animation

アニメーションの各フレームを定義したい時、GIFのような連続アニメーションを作りたい時、Drawable Animationをオススメです。しかし、フレームはDrawableのリソースを使うので、パラパラになって、各フレームを定義するのはかなり大変だと思います。

Property Animation

Android 3.0(API 11)からサポートされて、多く機能を持って、柔軟性が高くて、カスタマイズしやすいです。複雑なアニメーションを作るとき、Property Animationを使ったら、うまくできます。

3Dコインフリップのアニメーション

今回はPropertyアニメーションを使って、表裏回転するコインのアニメーションを一緒に作ってみましょう!!!

なぜPropertyアニメーションなのか?

View Animationだけで多く仕様を対応することができますが、基本的な機能しかサポートしないので、
3Dコインフリップなど複雑なアニメーションなら、実行することはできません。

Drawable Animationなら全然大丈夫ですが、複数のフレーム(画像)が必要になります。
実はProperty Animationに比べて、Drawble Animationを使えば、ソースコードは短く、処理は早くなり、簡単に実行することができます。
しかし、各フレームを定義することの代わりに、表と裏の2枚の画像だけで、Property Animationを使って、3Dコインフリップを作ることもできます。それはフレームを準備したくない人にとって、凄く便利ですね。

カードフリップというアニメーションのチュートリアル、以下のリンクが参考になりました。
http://developer.android.com/training/animation/cardflip.html
この資料により、フラグメントを使って、アニメーションを作りますので、画面遷移などで使ったら、すごく良いアイデアです。

今回コインを1回だけではなく、何回もぐるぐる回転するアニメーションを作ってみましょう!

まず、コインの表側と裏側のビューを定義します。

上書いたImageViewのsrcのfrontとbackはコインの表側と裏側の画像です。画像はなんでもいいですから、自分の画像を勝手に使ってもオーケーですよ!

次はAnimation

full_flip_timeは回転速度で、ここは1000(1秒)にセットして、half_flip_timeは500(0.5秒)です。
表側を非表示するアニメーションは逆です。

アニメーションDONE!

コインの両側を表示するため、FrameLayoutを使うことになります。
FrameLayoutの中に先ほど作ったコインの両側のビューを追加します。

(また)なぜFrameLayoutを使うのか?

FrameLayoutのとても便利な特徴はビューを重ね合わせ表示できることです。
コインをフリップするとき、他の側を表示することは一番大事なことなので、FrameLayoutにします。

CoinFlipActivityで上のレイアウトをContentViewにセットして、それからコインの各側も定義します。

コインのフリップアニメーションも

OK!後はクリックイベントを取得して、コイン回転を行います。
そうすると、画面をクリックするとき、コイン回転するのを起動します。

さあさあ、ビルドしてみましょう!!!
うまくフリップしますね、でも一回しか回転できない。。。

まず、アニメーションを修正して、以下のを追加します。

あと、AnimatorListenerをimplementして、アニメーションのステータスにより、適当な動作を実行します。
今回はコインを無限にフリップするため、onAnimationEndという関数だけ使います。

AnimatorのListenerの設定を忘れないで

DONE!!!

ビルドしてみましょう!結果はこういう感じになっています。

coin_flip

最後に

以上となります。
今回簡単で、コインの両側しか使いませんでしたが、コインのエッジも追加して、ズームなどのアニメーションも使ったら、もっと綺麗になると思います。