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();                    }                });

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