Android動畫--幀動畫和補間動畫

幀動畫

• 首先我們定義在drawable文件夾下定義一個xml文件
• 裏面包含我們要播放的動畫的圖片，以及每一幀動畫的播放的時長

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/feiben1" android:duration="100"/>
    <item android:drawable="@mipmap/feiben2" android:duration="100"/>
    <item android:drawable="@mipmap/feiben3" android:duration="100"/>
    <item android:drawable="@mipmap/feiben4" android:duration="100"/>
    <item android:drawable="@mipmap/feiben5" android:duration="100"/>
    <item android:drawable="@mipmap/feiben6" android:duration="100"/>
    <item android:drawable="@mipmap/feiben7" android:duration="100"/>
    <item android:drawable="@mipmap/feiben8" android:duration="100"/>
</animation-list>

• 下面就是引用我們的xml文件來顯示動畫了，這裏我們有兩種方式

1.在佈局文件中引用

• 只需要在src屬性中引用相應的xml文件就可以了

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/run"/>

• 注意在佈局中引用，我測試的時候在5.0版本的模擬器，和我自己的手機上不會播放，換成4.4.4就可以了，我不知道是不是隻有我的這樣，特別說明一下

2.在代碼中引用

imageView.setBackgroundResource(R.drawable.run);
                AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();
                animationDrawable.start();

• 效果圖
  

補間動畫

• 補間動畫分爲四種
  位移動畫 TranslateAnimation
  旋轉動畫 RotateAnimation
  縮放動畫 ScaleAnimation
  淡入淡出動畫 AlphaAnimation

• 補間動畫在res文件夾下新建anim文件夾，下面放置動畫的xml文件

相關的屬性

• setDuration(long durationMills)
  　　設置動畫持續時間（單位：毫秒）
• setFillAfter(Boolean fillAfter)
  　　如果fillAfter的值爲true,則動畫執行後，控件將停留在執行結束的狀態
• setFillBefore(Boolean fillBefore)
  　　如果fillBefore的值爲true，則動畫執行後，控件將回到動畫執行之前的狀態
• setStartOffSet(long startOffSet)
  　　設置動畫執行之前的等待時間

• setRepeatCount(int repeatCount)
  　　設置動畫重複執行的次數

• Interpolator定義了動畫變化的速率，在Animations框架當中定義了一下幾種Interpolator
  AccelerateDecelerateInterpolator：在動畫開始與結束的地方速率改變比較慢，在中間的時候速率快。
  AccelerateInterpolator：在動畫開始的地方速率改變比較慢，然後開始加速
  CycleInterpolator：動畫循環播放特定的次數，速率改變沿着正弦曲線
  DecelerateInterpolator：在動畫開始的地方速率改變比較慢，然後開始減速
  LinearInterpolator：動畫以均勻的速率改變

• Interpolator一般定義在set的標籤中

位移動畫 TranslateAnimation

• 相應的xml佈局文件如下，其中的屬性比較見簡單，就不再解釋

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="500"
        android:toYDelta="0"></translate>
</set>

• 相應的代碼如下

imageView2.clearAnimation();
                Animation animationTranslate = AnimationUtils.loadAnimation(this, R.anim.translateanimation);
                imageView2.setImageResource(R.mipmap.ic_launcher);
                imageView2.setAnimation(animationTranslate);

旋轉動畫 RotateAnimation

• 相應的xml文件
• repeatCount表示重複次數，-1表示循環
• pivotX和pivotY表示旋轉的中心點，50%表示就是圖片的中心

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000">
    <rotate
        android:repeatCount="-1"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360"></rotate>
</set>

• 相應的代碼如下

imageView2.clearAnimation();
                Animation animationRotate = AnimationUtils.loadAnimation(this, R.anim.rotateanimation);
                imageView2.setImageResource(R.mipmap.ic_launcher);
                imageView2.setAnimation(animationRotate);

縮放動畫 ScaleAnimation

• 相應的xml文件如下
• fromXScale開始的圖片比例，1表示正常大小
• toXScale漸變的比例，2表示放大兩倍

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

• 相應的代碼如下

imageView2.clearAnimation();
                Animation animationScale = AnimationUtils.loadAnimation(this, R.anim.scaleanimation);
                imageView2.setImageResource(R.mipmap.ic_launcher);
                imageView2.setAnimation(animationScale);

淡入淡出動畫 AlphaAnimation

• 相應的xml文件如下
• fromAlpha表示開始的透明度，1表示不透明
• toAlpha表示最終的透明度，0表示完全透明

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"></alpha>
</set>

• 相應的邏輯代碼如下

imageView2.clearAnimation();
                Animation animationAlpha = AnimationUtils.loadAnimation(this, R.anim.alphaanimation);
                imageView2.setImageResource(R.mipmap.ic_launcher);
                imageView2.setAnimation(animationAlpha);

補間動畫的組合使用

• 相應的xml文件如下

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000">
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"></alpha>
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360"></rotate>
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="500"
        android:toYDelta="0"></translate>
</set>

• 相應的邏輯代碼如下

imageView2.clearAnimation();
                Animation animationMany = AnimationUtils.loadAnimation(this, R.anim.manyanimation);
                imageView2.setImageResource(R.mipmap.ic_launcher);
                imageView2.setAnimation(animationMany);

補間動畫的監聽事件

• 以上面的組合的補間動畫爲例子
• 這裏代碼比較簡單易懂，就不再一一解釋了

                imageView2.clearAnimation();
                Animation animationMany = AnimationUtils.loadAnimation(this, R.anim.manyanimation);
                imageView2.setImageResource(R.mipmap.ic_launcher);
                imageView2.setAnimation(animationMany);
                animationMany.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                        Toast.makeText(MainActivity.this, "動畫開始啦", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        Toast.makeText(MainActivity.this, "動畫結束啦", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                        Toast.makeText(MainActivity.this, "動畫重複啦", Toast.LENGTH_SHORT).show();
                    }
                });