ImageViewを押された時にアニメーションを行いたい

Question

表題について質問があります。

ImageViewを押した時に画像が小さくなり、指を離すと元の大きさに戻るアニメーションを付けたくて悩んでいます。

手始めに以下の方法で実装しました。

Android Studio 2.3
Windows7 Professional x64

[MainActivity.java]
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void animeStart(View v){
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.touch);
        v.startAnimation(animation);
    }
}

[res/layout/activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:onClick="animeStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"/>
</RelativeLayout>

[res/anim/touch.xml]

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="0.5"
        android:toXScale="1"
        android:fromYScale="0.5"
        android:toYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="300"
        android:fillAfter="true" />
</set>

これで実装しましたが、これだとボタンから指が離れた時にアニメーションが開始します。

なので少し修正しました。

public class MainActivity extends AppCompatActivity {

    final String TAG = "TouchAnime";
    ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.imageView);
        imageView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){
                    Log.d(TAG, "down");
                    // 縮小するアニメーションを作成
                    ScaleAnimation animation_scale = new ScaleAnimation(1, 0.5f, 1, 0.5f, 0.5f, 0.5f);
                    // アニメーション実行時間を指定する（ms）
                    animation_scale.setDuration( 300 );
                    // アニメーションの起動
                    imageView.startAnimation( animation_scale );

                    // 途中で止めるには....?
                    // animation_scale.cancel();    // 利かない


                }else if(motionEvent.getAction() == MotionEvent.ACTION_UP){
                    // ここで元の画像サイズに戻す処理を行う
                    Log.d(TAG, "up");

                    ScaleAnimation animation_scale = new ScaleAnimation(0.5f,1, 0.5f, 1, 2, 2);
                    // アニメーション実行時間を指定する（ms）
                    animation_scale.setDuration( 300 );
                    // アニメーションの起動
                    imageView.startAnimation( animation_scale );

                    // 途中で止めるには....?
                    // animation_scale.cancel();    // 利かない

                }
                return false;
            }
        });
    }

    public void animeStart(View v){
        Log.d(TAG, "animeStart");
        // ここはImageViewが押された時の処理
    }
}

悪化しました。

画像は変な方向に縮小されるわ、アニメーションは終了後に元に戻ってしまって途中で止まらないわで困っています。
どうすればいいのか誰か教えてください

Answer 1

タッチイベントのログは想定通りに出力されていますか？

ScaleAnimation#setFillAfterを設定していませんね、おそらくこれが終了後に戻る理由ですね。

Comments

[KokoCoupon]

ありがとうございます。
ご指摘頂いた内容を元に、以下の様に修正したら期待する動作になりました。
もし変更出来る箇所があればご指摘下さい。

imageView = (ImageView) findViewById(R.id.imageView);
imageView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){
Log.d(TAG, "down");
// 縮小するアニメーションを作成
ScaleAnimation animation_scale = new ScaleAnimation(1, 0.5f, 1, 0.5f, Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF, 0.5f); //修正
// アニメーション実行時間を指定する（ms）
animation_scale.setDuration( 300 );

// animation_scale.setFillEnabled(true);
animation_scale.setFillAfter(true); // 追加
// アニメーションの起動
imageView.startAnimation( animation_scale );
}else if(motionEvent.getAction() == MotionEvent.ACTION_UP){
Log.d(TAG, "up");

ScaleAnimation animation_scale = new ScaleAnimation(0.5f, 1, 0.5f, 1, Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF, 0.5f); // 修正
// アニメーション実行時間を指定する（ms）
animation_scale.setDuration( 300 );

// アニメーションの起動
imageView.startAnimation( animation_scale );
}
return false;
}
});

[yona]

アニメーションの処理をメソッドに分割した方がいいですね。

[KokoCoupon]

こんな感じですかね。

imageView = (ImageView) findViewById(R.id.imageView);
imageView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
Log.d(TAG, "down");
onTouchAnimation(imageView, 0.5f, 0.5f);

} else if (motionEvent.getAction() == MotionEvent.ACTION_UP) {
Log.d(TAG, "up");
onTouchAnimation(imageView, 1.0f, 1.0f);
}
return false;
}
});
}

private void onTouchAnimation(View targetView, float scaleX, float scaleY ) {
// 縮小するアニメーションを作成
ScaleAnimation animation_scale = new ScaleAnimation(1, scaleX, 1, scaleY, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); //修正
// アニメーション実行時間を指定する（ms）
animation_scale.setDuration(300);

animation_scale.setFillEnabled(true);
animation_scale.setFillAfter(true); // 追加

// アニメーションの起動
targetView.startAnimation(animation_scale);
}