しむしむてるるの日記&雑談 同人誌の進捗やら仕事のあれこれやら書いています。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

ImageView を使ったカードをめくるようなアニメーション

Androidアプリ開発訓練が自由制作の期間に入りましたが、
残り1ヶ月の時間を持て余しそうだったので、
ふと思い立って、Androidで簡単なカード(トランプ)ゲームを作りつつ、
作る過程のあれこれを勉強しつつ記事にしていこうと思いました。

今回は、その第1歩として、カードをめくる様なアニメーションを作ってみます。

アニメーションの考え方としては、
1. カードの横方向の幅を徐々に狭く(縮小)していく
2. 幅が0になった時に、カードの絵柄を変える
3. カードの幅を元に戻していく
の3つの手順となります。
実際に1や3を行うには、AndroidのSDKで実装されているアニメーション機能を使うと便利です。(※)
アニメーションには、移動させたり回転させたりといくつかの種類がありますが、
今回は拡大縮小を行うので、使用するのは ScaleAnimation となります。

※ アニメーション機能を使わない方法としては、サーフェイスビューを使うなどして一定時間毎に絵を書き直す方法が考えられます。

では、早速コードを見てみましょう。
ちなみに、リソースには適当に作成したomote.jpgとura.pngを使用しました。
カードの表の絵柄カードの裏の絵柄

package jp.sweetsblast.cardturn;

import android.app.Activity;
import android.os.Bundle;import android.view.Gravity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.LinearInterpolator;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;

public class CardTurnActivity extends Activity implements View.OnClickListener, AnimationListener {

ImageView imageview;
boolean animation_hf_flg;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

LinearLayout layout = new LinearLayout(this);
layout.setGravity(Gravity.CENTER);
imageview = new ImageView(this);
imageview.setPadding( 0, 0, 0, 0);
imageview.setImageResource(R.drawable.ura);
imageview.setScaleType(ScaleType.CENTER);
imageview.setOnClickListener(this);
imageview.setTag(false);
layout.addView(imageview);
setContentView(layout);
}

// View.OnClickListenerインタフェースのメソッド
public void onClick(View v) {
// カードがクリックされたら、90°回転
AnimationSet set = new AnimationSet(true);
// ↓の第5・6引数の276はカードの絵柄の横幅、縦幅です。
//  実際にはimageのwidthやheightを得る方が賢いです。
ScaleAnimation scale = new ScaleAnimation( 1.0f, 0.0f, 1.0f, 1.0f, 276f/2, 276f/2);
scale.setAnimationListener(this);
set.setFillAfter(true);
set.setFillEnabled(true);
set.addAnimation(scale);
set.setDuration(500);
set.setInterpolator( new LinearInterpolator());
imageview.startAnimation(set);
animation_hf_flg = true;
}

// AnimationListenerインタフェースのメソッド
public void onAnimationEnd(Animation animation) {
// 後半の回転終了時の呼び出しだったら何もせずに終了
if( animation_hf_flg==false ) return;

// X方向のサイズが0になって画像が見えない内に画像を変更
Boolean flg = (Boolean)imageview.getTag();
if( flg==false ){
imageview.setImageResource(R.drawable.omote);
}else{
imageview.setImageResource(R.drawable.ura);
}
imageview.setTag(!flg);

// もう一度90°回転
AnimationSet set = new AnimationSet(true);
ScaleAnimation scale = new ScaleAnimation( 0.0f, 1.0f, 1.0f, 1.0f, 276f/2, 276f/2);
scale.setAnimationListener(this); // これは設定しなくても今回は問題ない
set.setFillAfter(true);
set.setFillEnabled(true);
set.addAnimation(scale);
set.setDuration(500);
set.setInterpolator( new LinearInterpolator());
imageview.startAnimation(set);
animation_hf_flg = false;
}

// AnimationListenerインタフェースのメソッド
public void onAnimationRepeat(Animation animation) { }

// AnimationListenerインタフェースのメソッド
public void onAnimationStart(Animation animation) { }
}

これを実行すると、カードをクリックすると1秒掛けてくるっと回転します。
[広告] VPS

ただ、リソースのサイズが 276 x 276 の正方形なので、微妙にカードっぽくありませんが(^^;
あと、欲を言えば、カードに奥行きをだしたりもしたいですね...
その辺はもう少し改良してみたいと思います。
詳しい解説とかも、後日と言う事で。(^^;

スポンサーサイト
[ 2012/06/28 04:44 ] Androidアプリ開発 | TB(0) | CM(0)
FC2カウンター
カレンダー
05 | 2012/06 | 07
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Twitter@sweetsblast
過去ログ

2017年 08月 【1件】
2017年 06月 【3件】
2017年 05月 【3件】
2017年 04月 【3件】
2017年 03月 【5件】
2017年 01月 【1件】
2016年 09月 【2件】
2016年 04月 【2件】
2016年 03月 【2件】
2016年 01月 【5件】
2015年 12月 【3件】
2014年 05月 【1件】
2014年 04月 【1件】
2013年 12月 【1件】
2013年 03月 【4件】
2013年 02月 【3件】
2013年 01月 【1件】
2012年 12月 【3件】
2012年 11月 【4件】
2012年 10月 【2件】
2012年 09月 【4件】
2012年 08月 【2件】
2012年 07月 【3件】
2012年 06月 【11件】
2012年 05月 【11件】
2012年 04月 【9件】
2012年 03月 【15件】
2012年 02月 【17件】
2012年 01月 【5件】
2011年 12月 【14件】
2011年 11月 【11件】
2011年 10月 【19件】
2011年 09月 【10件】
2011年 08月 【4件】
2011年 07月 【11件】
2011年 06月 【4件】
2011年 05月 【1件】
2011年 04月 【17件】
2011年 03月 【29件】
2011年 02月 【24件】
2011年 01月 【30件】
2010年 12月 【30件】
2010年 11月 【22件】
2010年 10月 【26件】
2010年 09月 【27件】
2010年 08月 【30件】
2010年 07月 【27件】
2010年 06月 【24件】
2010年 05月 【7件】
2010年 04月 【6件】
2010年 03月 【3件】
2010年 02月 【6件】
2010年 01月 【8件】
2009年 12月 【8件】
2009年 11月 【5件】
2009年 10月 【7件】
2009年 09月 【18件】
2009年 08月 【22件】
2009年 07月 【14件】
2009年 06月 【16件】
2009年 05月 【28件】
2009年 04月 【25件】
2009年 03月 【5件】
2009年 01月 【2件】
2008年 12月 【1件】
2008年 11月 【2件】
2008年 10月 【3件】
2008年 09月 【6件】
2008年 08月 【3件】
2008年 07月 【2件】
2008年 06月 【2件】
2008年 05月 【3件】
2008年 04月 【4件】
2008年 03月 【11件】
2008年 02月 【12件】
2008年 01月 【7件】
2007年 12月 【8件】
2007年 11月 【5件】
2007年 10月 【8件】
2007年 09月 【6件】
2007年 08月 【15件】
2007年 07月 【10件】
2007年 06月 【14件】
2007年 05月 【12件】
2007年 04月 【10件】
2007年 03月 【7件】
2007年 02月 【19件】
2007年 01月 【18件】
2006年 12月 【25件】
2006年 11月 【27件】
2006年 10月 【19件】
2006年 09月 【26件】
2006年 08月 【12件】
2006年 07月 【5件】



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。