Android 補間動畫學習

月攬發表於2020-11-27
Android動畫

Android 補間動畫

1.各種動畫的詳細講解

這裡的android:duration都是動畫的持續時間，單位是毫秒~

———————————————————————————————————————
（1）AlphaAnimation(透明度漸變)

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0"
    android:duration="2000"/>
<!--    fromAlpha :起始透明度-->
<!--    toAlpha:結束透明度-->
<!--    透明度的範圍為：0-1，完全透明-完全不透明-->

———————————————————————————————————————
（2）ScaleAnimation(縮放漸變)

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromXScale="0.2"
    android:toXScale="1.5"
    android:fromYScale="0.2"
    android:toYScale="1.5"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"/>


<!--    fromXScale/fromYScale：沿著X軸/Y軸縮放的起始比例-->
<!--    toXScale/toYScale：沿著X軸/Y軸縮放的結束比例-->
<!--    pivotX/pivotY：縮放的中軸點X/Y座標，即距離自身左邊緣的位置，比如50%就是以影像的 中心為中軸點-->

———————————————————————————————————————
（3）TranslateAnimation(位移漸變)

<translate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromXDelta="0"  
    android:toXDelta="320"  
    android:fromYDelta="0"  
    android:toYDelta="0"  
    android:duration="2000"/>

<!--    fromDegrees/toDegrees：旋轉的起始/結束角度-->
<!--    repeatCount：旋轉的次數，預設值為0，代表一次，假如是其他值，比如3，則旋轉4次 另外，值為-1或者infinite時，表示動畫永不停止-->
<!--    repeatMode：設定重複模式，預設restart，但只有當repeatCount大於0或者infinite或-1時 才有效。還可以設定成reverse，表示偶數次顯示動畫時會做方向相反的運動！-->

———————————————————————————————————————
（4）RotateAnimation(旋轉漸變)

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:duration="1000"
    android:repeatCount="infinite"
    android:repeatMode="reverse"/>

<!--    fromDegrees/toDegrees：旋轉的起始/結束角度-->
<!--    repeatCount：旋轉的次數，預設值為0，代表一次，假如是其他值，比如3，則旋轉4次 另外，值為-1或者infinite時，表示動畫永不停止-->
<!--    repeatMode：設定重複模式，預設restart，但只有當repeatCount大於0或者infinite或-1時 才有效。還可以設定成reverse，表示偶數次顯示動畫時會做方向相反的運動！-->

———————————————————————————————————————
（5）AnimationSet(組合漸變)
這個就是前面幾個屬性組合

<set  xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:shareInterpolator="true">
<alpha
    android:fromAlpha="1.0"
    android:toAlpha="0"
    android:duration="2000"/>

<rotate
   android:fromDegrees="0"
   android:toDegrees="360"
   android:duration="1000"
   android:repeatCount="infinite"
   android:repeatMode="reverse"/>
<!--    fromAlpha :起始透明度-->
<!--    toAlpha:結束透明度-->
<!--    透明度的範圍為：0-1，完全透明-完全不透明-->
</set>

組合漸變可以使用set作為根節點
——————————————————————————————————————

2.例項體驗

下面我們就用上面的動畫來寫個例子，先來寫個佈局頁面

<LinearLayout 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"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_alpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="透明度漸變"/>
    <Button
        android:id="@+id/btn_scale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="縮放漸變"/>
    <Button
        android:id="@+id/btn_translate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位移漸變"/>
    <Button
        android:id="@+id/btn_rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="旋轉漸變"/>

    <Button
        android:id="@+id/btn_alpha_rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="透明_旋轉"/>
    <ImageView
        android:id="@+id/animate_imge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_animation"
        android:layout_gravity="center_horizontal"/>

</LinearLayout>

———————————————————————————————————————
好的，接著到我們的MainActivity.java，同樣非常簡單，只需呼叫AnimationUtils.loadAnimation() 載入動畫，然後我們的View控制元件呼叫startAnimation開啟動畫即可~

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 Button alphaBtnOut,alphaBtnin,translateBtn,rotateBtn,alpharotateBtn,scaleBtn;
    private ImageView aniImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        aniImg = findViewById(R.id.animate_imge);
         //透明度動畫
         alphaBtnin = findViewById(R.id.btn_alpha_in);
         alphaBtnin.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
         Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim_alpha_in);
         animation.setAnimationListener(new Animation.AnimationListener() {
          @Override
          public void onAnimationStart(Animation animation) {
          aniImg.setVisibility(View.VISIBLE);
          }

          @Override
          public void onAnimationEnd(Animation animation) {
          }

          @Override
          public void onAnimationRepeat(Animation animation) {

          }
      });
          aniImg.startAnimation(animation);
          }
      });
          //縮放動畫
          scaleBtn = findViewById(R.id.btn_scale);
          scaleBtn.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
        
          Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim_scale);
          aniImg.startAnimation(animation);
          animation.setAnimationListener(new Animation.AnimationListener() {
           @Override
           public void onAnimationStart(Animation animation) {

           }

           @Override
           public void onAnimationEnd(Animation animation) {

           }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
     }
  });
           //位移動畫
           translateBtn = findViewById(R.id.btn_translate);
           translateBtn.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
           Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim_translate);
           aniImg.startAnimation(animation);
           animation.setAnimationListener(new Animation.AnimationListener() {
           @Override
           public void onAnimationStart(Animation animation) {

           }

           @Override
           public void onAnimationEnd(Animation animation) {

           }

           @Override
           public void onAnimationRepeat(Animation animation) {

           }
        });
      }
    });
          //旋轉動畫
          rotateBtn = findViewById(R.id.btn_rotate);
          rotateBtn.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
          Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim_rotate);
          aniImg.startAnimation(animation);
          animation.setAnimationListener(new Animation.AnimationListener() {
          @Override
          public void onAnimationStart(Animation animation) {

          }

          @Override
          public void onAnimationEnd(Animation animation) {

          }

          @Override
          public void onAnimationRepeat(Animation animation) {

          }
       });
     }
   });
   alpharotateBtn = findViewById(R.id.btn_alpha_rotate);
          alpharotateBtn.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
          Animation animation1
          =AnimationUtils.loadAnimation(MainActivity.this,R.anim.anim_alpha_rotate);
          aniImg.startAnimation(animation);
          animation.setAnimationListener(new Animation.AnimationListener() {
          @Override
          public void onAnimationStart(Animation animation) {

          }

          @Override
          public void onAnimationEnd(Animation animation) {

          }

          @Override
          public void onAnimationRepeat(Animation animation) {

          }
        });
      }
    });
  }
}

3.動畫狀態的監聽

我們可以對動畫的執行狀態進行監聽，呼叫動畫物件的：

setAnimationListener(new AnimationListener())方法，重寫下面的三個方法：
onAnimationStart()：動畫開始
onAnimtaionRepeat()：動畫重複
onAnimationEnd()：動畫結束
即可完成動畫執行狀態的監聽~

總結

給大家講解了下Android中的第二種動畫(漸變動畫)，四種動畫的詳解，以及 設定動畫監聽器。

相關文章