android.view.animation.Animationのクラスを使って、Viewを移動させるTranslateAnimationを簡単に組むことができます。
API 29
TranslateAnimation
Viewにアニメーションを施したいときはこのAnimationが簡単です。ただし途中で止めるなど込み入ったことはできません。Property Animation 等を使いましょう。
設定方法は2通りあります。
XML attributes
res以下にanimというフォルダーを作成してxmlファイルを置きます。
animationの属性設定は<translate />タグを使って以下のように設定します。
- fromXDelta:開始時のx位置
- toXDelta:終了時のx位置
- fromYDelta:開始時のy位置
- toYDelta:終了時のy位置
- fillAfter:アニメーション終了時にそのままにする(true)
- duration:アニメーション期間[msec]
移動アニメーションの開始位置と終了位置設定は3通りあります。
- Animation.ABSOLUTE:240 のようなpixel絶対値
- Animation.RELATIVE_TO_SELF:自分のサイズの割合、%
- Animation.RELATIVE_TO_PARENT:parentサイズの割合、%p
TranslateAnimationは画面上を移動するので%pを使うのは画面サイズを気にせずできるのでメリットがあります。今回その方法で試してみます。
res\anim\translate_animation.xml
1 2 3 4 5 6 7 8 9 |
<?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
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 31 32 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?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
1 2 3 4 5 |
<resources> <string name="app_name">YourAppName</string> <string name="description">ball</string> <string name="button">Translate</string> </resources> |
Animationしたい画像をImageViewに設定します。
コードで記述
のConstructorは幾つかありますが、今回使いやすいのはこれです。
1 2 3 4 5 |
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をそのままにする
移動アニメーションの開始位置と終了位置設定は3通りあります。
- Animation.ABSOLUTE:240 のようなpixel絶対値
- Animation.RELATIVE_TO_SELF:自分のサイズの割合、1.0が100%に相当
- Animation.RELATIVE_TO_PARENT:parentサイズの割合、1.0が100%に相当
MainActivity.java
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?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
これらの違いを分かるように切り分けで試してみました。
実際はそれぞれのサイズを計算する必要が出てくるので、使うアプリ次第でしょうか
関連ページ:
- android.view.animation
- AlphaAnimation フェードイン・フェードアウト
- RotateAnimation 回転アニメーション
- ScaleAnimation 拡大・縮小アニメーション
- TranslateAnimation 移動アニメーション
- AnimationSet アニメーションの組み合わせ
- Property Animation 画像が回転して落ちていくアニメーション
- AnimatorListenerAdapter によるAnimationの一時停止と再開くアニメーション
- frame-by-frame Animation でパラパラアニメーション
- TransitionDrawable クロスフェード animation
References:
TranslateAnimation
Animation Resources