5. TAPIAの表情を操作する(アニメーション)

Tapia
TAPIAの表情は、アニメーションを使用して操作します。

◆ソースコード:

tapiaAnimation.startAnimation(TapiaAnimation.PLAIN,true);//TAPIAの目がパチパチするアニメーションをスタートさせる

tapiaAnimation.stopAnimation();//TAPIAのアニメーションをストップさせる

◆◇◆◇◆サンプルコード:TAPIAの顔をタップすると驚いたり笑ったりする◆◇◆◇◆

1) ボタンを追加する

サンプルコード「0.ボタンを追加する」を参考に作成します

2) layoutを作成する

オリジナルのレイアウト上にアニメーションを追加することができます。 ここでは、戻るボタンを追加したレイアウトを作成します。
tapia-sample\app\src\main\res\layout直下へ「animation_layout.xml」を作成します。
Tapia

3) Activityに以下処理を記入する

//■□■タピアの顔をタップするとアニメーションが切り替わる■□■
public class AnimationActivity extends TapiaActivity {
    TapiaAnimation tapiaAnimation;
    boolean bFlg;
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //アクティビティに先ほど作成したレイアウトを配置
        setContentView(R.layout.animation_layout);
        //アニメーション用のImageViewオブジェクト取得
        ImageView btn0 = (ImageView) findViewById(R.id.top);
        //戻るボタン用のImageViewオブジェクト取得
        ImageView btn1  = (ImageView) findViewById(R.id.btn1);
        //戻るボタンをタップした時に終了する
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        //Tapiaアニメーションのインスタンスを作成する
        tapiaAnimation = new TapiaAnimation(this,btn0);
        //タピアの顔の背景が白くなるアニメーションを逆再生して、タピアの表情に動きを出す。16標準
        tapiaAnimation.reverseStartAtFrame(TapiaAnimation.TRANSITION1 ,false,16);
        //顔画面をタップした時アニメーションが切り替わる
        btn0.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                if (bFlg){
                    tapiaAnimation.startAnimation(TapiaAnimation.EXCITED,false);  //笑顔で上下に動く
                    bFlg=false;
                }else{
                    tapiaAnimation.startAnimation(TapiaAnimation.ALARM,false);//驚く
                    bFlg=true;
                }
            }
        });
        //アニメーション終了後の処理を設定する
        tapiaAnimation.setOnAnimationEndListener(new TapiaAnimation.OnAnimationEndListener() {
            @Override
            public void animationEnded() {
                //目がパチパチしたアニメーションをスタートする。引数はtrueにして繰り返す
                tapiaAnimation.startAnimation(TapiaAnimation.PLAIN,true); //目がパチパチ
            }
        });
    }
    @Override
    protected void onResume() {
        super.onResume();
    }
    @Override
    protected void onPause() {
        super.onPause();
    }
}
            

◆TapiaAnimation.startAnimation引数

AnimationName

※主なアニメーションです。他にもあります。
      TapiaAnimation.PLAIN :目がパチパチ
      TapiaAnimation.EXHAUSTED :寝る
      TapiaAnimation.DISAPPOINTED :眉毛がへの字
      TapiaAnimation.BLIZZARD :雪
      TapiaAnimation.CLEAR  :太陽
      TapiaAnimation.ALARM :驚く(背景が赤)
      TapiaAnimation.CRYING :泣く
      TapiaAnimation.CONFUSED :目が回る
      TapiaAnimation.EXCITED  :笑顔で弾む
      TapiaAnimation.FUNNY  :驚き上下に動く
      TapiaAnimation.LOVE :ハート

Loop

※繰り返しを指定します
true :繰り返す、false :1回のみ

© 2018 - MJI Inc. Copyright reserved -