[Android] Animation on UI View

Android 裡面有一些動畫的套件可以用，例如: 淡入出，移動...等。
這篇先以淡入、淡出的動畫來示範
最主要的程式碼是這些:

Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new AccelerateInterpolator());
fadeIn.setStartOffset(100);
fadeIn.setDuration(1000);
fadeIn.setAnimationListener(new Animation.AnimationListener()
{
    public void onAnimationEnd(Animation animation)
    {
        ivImage.setVisibility(View.VISIBLE);
    }
    public void onAnimationRepeat(Animation animation) {}
    public void onAnimationStart(Animation animation) {}
});
ivImage.startAnimation(fadeIn);

利用這個套件，寫了一個簡單的圖片淡入、淡出的範例程式
MainActivity.java:

public class MainActivity extends AppCompatActivity{
 
    ImageView ivImage;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        ivImage = (ImageView)findViewById(R.id.id_ivImage);
    }
 
    public void onClick(View v){
        switch (v.getId()){
            case R.id.id_btn01:
                mImageAnimation(ivImage, 100, 1000, true);
                break;
 
            case R.id.id_btn02:
                mImageAnimation(ivImage, 100, 1000, false);
                break;
        }
    }
 
    private static void mImageAnimation(final View img, long offset, long duration, boolean isFadeIn){
        if(isFadeIn){
            Animation fadeIn = new AlphaAnimation(0, 1);
            fadeIn.setInterpolator(new AccelerateInterpolator());
            fadeIn.setStartOffset(offset);
            fadeIn.setDuration(duration);
            fadeIn.setAnimationListener(new Animation.AnimationListener()
            {
                public void onAnimationEnd(Animation animation)
                {
                    img.setVisibility(View.VISIBLE);
                }
                public void onAnimationRepeat(Animation animation) {}
                public void onAnimationStart(Animation animation) {}
            });
            img.startAnimation(fadeIn);
        }
        else {
            Animation fadeOut = new AlphaAnimation(1, 0);
            fadeOut.setInterpolator(new AccelerateInterpolator());
            fadeOut.setStartOffset(offset);
            fadeOut.setDuration(duration);
            fadeOut.setAnimationListener(new Animation.AnimationListener()
            {
                public void onAnimationEnd(Animation animation)
                {
                    img.setVisibility(View.INVISIBLE);
                }
                public void onAnimationRepeat(Animation animation) {}
                public void onAnimationStart(Animation animation) {}
            });
            img.startAnimation(fadeOut);
        }
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.example.chris.myapplication.MainActivity">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="MainActivity"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <Button
        android:id="@+id/id_btn01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:onClick="onClick"
        android:text="Fade in"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />
 
    <Button
        android:id="@+id/id_btn02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:onClick="onClick"
        android:text="Fade out"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_btn01" />
 
    <ImageView
        android:id="@+id/id_ivImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_btn02"
        app:srcCompat="@drawable/img" />
 
</android.support.constraint.ConstraintLayout>

其實 Android 中還有其他動畫套件，例如: RotateAnimation、ScaleAnimation、TranslateAnimation
有空可以玩玩看。

END