[Android] TranslateAnimation 移動アニメーション

android.view.animation.Animationのクラスを使って、Viewを移動させるTranslateAnimationを簡単に組むことができます。
　

Android Studio 3.5.3
API 29

TranslateAnimation

　
Viewにアニメーションを施したいときはこのAnimationが簡単です。ただし途中で止めるなど込み入ったことはできません。Property Animation 等を使いましょう。
　
設定方法は２通りあります。
　

目次
1. XML attributes
2. コードで記述
3. サンプル動画

XML attributes

　
res以下にanimというフォルダーを作成してxmlファイルを置きます。

animationの属性設定は<translate />タグを使って以下のように設定します。

fromXDelta：開始時のx位置
toXDelta：終了時のx位置
fromYDelta：開始時のy位置
toYDelta：終了時のy位置
fillAfter：アニメーション終了時にそのままにする(true)
duration：アニメーション期間[msec]

移動アニメーションの開始位置と終了位置設定は３通りあります。

Animation.ABSOLUTE：240 のようなpixel絶対値
Animation.RELATIVE_TO_SELF：自分のサイズの割合、%
Animation.RELATIVE_TO_PARENT：parentサイズの割合、%p

TranslateAnimationは画面上を移動するので%pを使うのは画面サイズを気にせずできるのでメリットがあります。今回その方法で試してみます。
res\anim\translate_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromXDelta="0%p"
    android:toXDelta="40%p"
    android:fromYDelta="0%p"
    android:toYDelta="50%p"
    android:fillAfter="true"
    android:duration="3000" />

<?xml version="1.0" encoding="utf-8"?>

<translate xmlns:android="http://schemas.android.com/apk/res/android"

android:interpolator="@android:anim/decelerate_interpolator"

android:fromXDelta="0%p"

android:toXDelta="40%p"

android:fromYDelta="0%p"

android:toYDelta="50%p"

android:fillAfter="true"

android:duration="3000" />

　
MainActivity.java

package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private Animation animation;

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

        imageView = findViewById(R.id.image_view);
        animation = AnimationUtils.loadAnimation(this, R.anim.translate_animation);

        Button buttonFadeIn = findViewById(R.id.button);
        buttonFadeIn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                imageView.startAnimation(animation);
            }
        });
    }
}

package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

private Animation animation;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

animation = AnimationUtils.loadAnimation(this, R.anim.translate_animation);

Button buttonFadeIn = findViewById(R.id.button);

buttonFadeIn.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

imageView.startAnimation(animation);

}

});

}

　
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#88f"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:background="@drawable/ball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/button" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="#88f"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:background="@drawable/ball"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:contentDescription="@string/description"/>

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="end"

android:text="@string/button" />

</LinearLayout>

　
リソース
strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">ball</string>
    <string name="button">Translate</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="button">Translate</string>

</resources>

　
Animationしたい画像をImageViewに設定します。
　

コードで記述

　
TranslateAnimationのConstructorは幾つかありますが、今回使いやすいのはこれです。

TranslateAnimation(
    int fromXType, float fromXValue, 
    int toXType, float toXValue, 
    int fromYType, float fromYValue, 
    int toYType, float toYValue)

TranslateAnimation(

int fromXType, float fromXValue,

int toXType, float toXValue,

int fromYType, float fromYValue,

int toYType, float toYValue)

TranslateAnimation
- int fromXType：開始時のx位置座標のタイプ
- float fromXValue：開始時のx位置
- int toXType：終了時のx位置座標のタイプ
- float toXValue：終了時のx位置
- int fromYType：開始時のy位置座標のタイプ
- float fromYValue：開始時のy位置
- int toYType：終了時のy位置座標のタイプ
- float toYValue：終了時のy位置
setRepeatCount()：繰り返し回数
setDuration(msec)：アニメーションの期間[msec]
startAnimation()：アニメーションを開始
setFillAfter(true)：アニメーション終了時にViewをそのままにする

移動アニメーションの開始位置と終了位置設定は３通りあります。

Animation.ABSOLUTE：240 のようなpixel絶対値
Animation.RELATIVE_TO_SELF：自分のサイズの割合、1.0が100%に相当
Animation.RELATIVE_TO_PARENT：parentサイズの割合、1.0が100%に相当

MainActivity.java

package your.package.name;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private TranslateAnimation translateAnimation;

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

        imageView = findViewById(R.id.image_view);
        
        Button buttonFadeIn = findViewById(R.id.button);
        buttonFadeIn.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                startTranslate();
            }
        });
    }

    private void startTranslate(){
        // 設定を切り替え可能
        int type = 0;
        if(type == 0){
            // TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
            translateAnimation = new TranslateAnimation(
                    Animation.ABSOLUTE, 0.0f,
                    Animation.ABSOLUTE, 500.0f,
                    Animation.ABSOLUTE, 0.0f,
                    Animation.ABSOLUTE, 1200.0f);
        }
        else if(type == 1){
            translateAnimation = new TranslateAnimation(
                    Animation.RELATIVE_TO_SELF, 0.0f,
                    Animation.RELATIVE_TO_SELF, 0.9f,
                    Animation.RELATIVE_TO_SELF, 0.0f,
                    Animation.RELATIVE_TO_SELF, 1.8f);
        }
        else if(type ==2){
            translateAnimation = new TranslateAnimation(
                    Animation.RELATIVE_TO_PARENT, 0.0f,
                    Animation.RELATIVE_TO_PARENT, 0.4f,
                    Animation.RELATIVE_TO_PARENT, 0.0f,
                    Animation.RELATIVE_TO_PARENT, 0.6f);
        }

        // animation時間 msec
        translateAnimation.setDuration(2000);
        // 繰り返し回数
        translateAnimation.setRepeatCount(0);
        // animationが終わったそのまま表示にする
        translateAnimation.setFillAfter(true);
        //アニメーションの開始
        imageView.startAnimation(translateAnimation);
    }
}

package your.package.name;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.TranslateAnimation;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

private TranslateAnimation translateAnimation;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = findViewById(R.id.image_view);

Button buttonFadeIn = findViewById(R.id.button);

buttonFadeIn.setOnClickListener(new View.OnClickListener() {

public void onClick(View view) {

startTranslate();

}

});

}

private void startTranslate(){

// 設定を切り替え可能

int type = 0;

if(type == 0){

// TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)

translateAnimation = new TranslateAnimation(

Animation.ABSOLUTE, 0.0f,

Animation.ABSOLUTE, 500.0f,

Animation.ABSOLUTE, 0.0f,

Animation.ABSOLUTE, 1200.0f);

}

else if(type == 1){

translateAnimation = new TranslateAnimation(

Animation.RELATIVE_TO_SELF, 0.0f,

Animation.RELATIVE_TO_SELF, 0.9f,

Animation.RELATIVE_TO_SELF, 0.0f,

Animation.RELATIVE_TO_SELF, 1.8f);

}

else if(type ==2){

translateAnimation = new TranslateAnimation(

Animation.RELATIVE_TO_PARENT, 0.0f,

Animation.RELATIVE_TO_PARENT, 0.4f,

Animation.RELATIVE_TO_PARENT, 0.0f,

Animation.RELATIVE_TO_PARENT, 0.6f);

}

// animation時間 msec

translateAnimation.setDuration(2000);

// 繰り返し回数

translateAnimation.setRepeatCount(0);

// animationが終わったそのまま表示にする

translateAnimation.setFillAfter(true);

//アニメーションの開始

imageView.startAnimation(translateAnimation);

}

　
レイアウト
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#88f"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:background="@drawable/ball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/button" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="#88f"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:background="@drawable/ball"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:contentDescription="@string/description"/>

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="end"

android:text="@string/button" />

</LinearLayout>

サンプル動画

　
移動には以下のような異なる設定が可能です。

Animation.ABSOLUTE
Animation.RELATIVE_TO_SELF
Animation.RELATIVE_TO_PARENT

これらの違いを分かるように切り分けで試してみました。

実際はそれぞれのサイズを計算する必要が出てくるので、使うアプリ次第でしょうか
　
　