Android動畫系列之幀動畫和補間動畫的示例代碼

更新時間：2020年09月25日 08:30:07 作者：躬行之

Android 提供三種動畫：幀動畫、補間動畫和屬性動畫，本篇文章介紹幀動畫以及補間動畫的使用，屬性動畫的使用將在后面的文章中分享，那就來復習一下這兩種動畫的使用吧

Android 提供三種動畫：幀動畫、補間動畫和屬性動畫，本篇文章介紹幀動畫以及補間動畫的使用，屬性動畫的使用將在后面的文章中分享，那就來復習一下這兩種動畫的使用吧。

FrameAnimation

FrameAnimation 即逐幀動畫，通俗來說就是按照圖片動作順序依次播放來形成動畫，創(chuàng)建 FrameAnimation 可用 xml 定義也可直接使用代碼創(chuàng)建。

xml創(chuàng)建幀動畫

在 res/drawable 文件夾下創(chuàng)建一個 drawable 文件，使用 animation-list 標簽，具體內容如下：

<?xml version="1.0" encoding="utf-8"?>
<!--FrameAnimator-->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
 android:oneshot="false">
 <item
  android:drawable="@drawable/zzlx1"
  android:duration="100" />
 <item
  android:drawable="@drawable/zzlx2"
  android:duration="100" />
 <item
  android:drawable="@drawable/zzlx3"
  android:duration="100" />
 <!--...-->
</animation-list>

屬性 oneshot 為 true 表示動畫只能播放一次，false 表示動畫循環(huán)播放，drawable 是當前動作對應的圖片，duration 是其持續(xù)時間，duration 長度影響動畫播放的快慢，然后在 Activity 中使用獲取該 drawable 文件對應的 AnimationDrawable，然后使用 AnimationDrawable 對象來控制動畫的狀態(tài)，參考如下：

//獲取Frame動畫文件對應的AnimationDrawable
mAnimationDrawable = (AnimationDrawable) getResources().getDrawable(R.drawable.frame_animator);
//設置AnimationDrawable為圖片的背景
imageView.setBackground(mAnimationDrawable);

//開啟動畫
mAnimationDrawable.start();
//停止動畫
mAnimationDrawable.stop();

代碼創(chuàng)建幀動畫

使用代碼創(chuàng)建幀動畫就是創(chuàng)建 AnimationDrawable 對象，然后在 AnimationDrawable 中添加對應的 Frame 即可，代碼參考如下：

//代碼創(chuàng)建Frame動畫
mAnimationDrawable = new AnimationDrawable();
//設置動畫循環(huán)播放，true為動畫只播放一次
mAnimationDrawable.setOneShot(false);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx1),100);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx2),100);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.zzlx3),100);
//...
imageView.setBackground(mAnimationDrawable);

//開啟動畫
mAnimationDrawable.start();
//停止動畫
mAnimationDrawable.stop();

FrameAnimation 效果如下：

TweenAnimation

TweenAnimation 即常說的補間動畫，主要有以下幾種：

位移動畫(Translation)
縮放動畫(Scale)
旋轉動畫(Rotate)
透明度動畫(Alpha)
組合動畫

上述動畫都有自己特有的一下屬性，下面來看一看這些動畫通用的一些屬性，具體如下：

<!--設置動畫持續(xù)時間-->
android:duration="1200"
<!--動畫開始的延時-->
android:startOffset ="1000"
<!--動畫播放完是否回到動畫開始的位置，默認true，如果fillBefore設置為false,動畫不會停留在結束位置，不知道是不是bug-->
android:fillBefore = "true"
<!--動畫播放完之后是否回到動畫結束的位置，默認false,如果fillAfter設置為true,動畫則會停留在結束位置-->
android:fillAfter = "false"
<!--設置fill...屬性是否啟用，對fillAfter無效-->
android:fillEnabled= "true"
<!--設置動畫重復模式,restart為重新播放，reverse為倒序回放，和repeatCount搭配使用-->
android:repeatMode = "restart"
<!--設置動畫重復次數-->
android:repeatCount = "0"
<!--設置動畫插值器，這里的插值器是動畫開始速度較慢，后面加速-->
android:interpolator = "@android:anim/accelerate_interpolator"

如果在代碼中進行對應動畫實現，這些屬性也有對應的屬性設置，直接設置即可。

位移動畫(Translate)

位移動畫對 View 進行水平方向或垂直方向位置的平移，可指定起始位置和結束位置，可使用 xml 定義位移動畫也可以使用代碼創(chuàng)建位移動畫，位移動畫對應的 Animation 的子類是 TranslateAnimation。

xml定義位移動畫：在 res/anim 下創(chuàng)建一個xml文件 translation_anim.xml，在該文件中定義位移動畫如下：

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="1200"
 android:startOffset ="0"
 android:fillBefore = "true"
 android:fillAfter = "false"
 android:fillEnabled= "false"
 android:repeatMode = "reverse"
 android:repeatCount = "5"
 android:interpolator = "@android:anim/accelerate_interpolator"

 android:fromXDelta="0"
 android:fromYDelta="0"
 android:toXDelta="100"
 android:toYDelta="100">

上述 xml 文件定義了一個位移動畫文件，其中位移動畫自有的屬性含義如下：

<!--水平方向動畫開始的位置-->
android:fromXDelta="0"
<!--垂直方向動畫開始的位置-->
android:fromYDelta="0"
<!--水平方向動畫結束的位置-->
android:toXDelta="100"
<!--垂直方向動畫結束的位置-->
android:toYDelta="100"

然后在 Activity 中獲取該 xml 文件對應的 TranslateAnimation，將其設置到想要設置位移動畫的 View 上即可，具體如下：

private void translation(){
 //獲取在anim下定義的動畫文件
 TranslateAnimation translateAnimation = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.translation_anim);、
 //設置并開啟動畫
 ivImage.startAnimation(translateAnimation); 
}

代碼中創(chuàng)建位移動畫：代碼創(chuàng)建位移動畫使用 Animation 的子類 TranslateAnimation,使用時直接創(chuàng)建 TranslateAnimation 對象即可，具體如下：

//代碼創(chuàng)建位移動畫
private void translation(){
 //表示相對View自身原點(View左上角)像素偏移量
 TranslateAnimation translateAnimation = new TranslateAnimation(0,100,0,100);
 //設置動畫持續(xù)時間
 translateAnimation.setDuration(1200);
 //設置動畫重復模式
 translateAnimation.setRepeatMode(Animation.REVERSE);
 //設置動畫重復次數
 translateAnimation.setRepeatCount(3);
 translateAnimation.setFillAfter(true);
 //設置動畫插值器
 translateAnimation.setInterpolator(this,android.R.anim.accelerate_interpolator);
//  translateAnimation.setInterpolator(new AccelerateInterpolator());
 //...
 ivImage.startAnimation(translateAnimation); 
}

上面參數中使用的時像素的偏移量，API 還提供了針對 View 自身一個父 View 的百分比的設置方式，下面這種創(chuàng)建 TranslateAnimation 對象的方式和上面實現的效果是一樣的。具體如下：

/**
 * ABSOLUTE:表示相對View自身原點(View左上角)像素偏移量
 *   此時和TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)一樣
 * RELATIVE_TO_SELF:表示相對View自身的百分比，如0.5f表示View自身大小的50%，1.0f表示View自身大小
 * RELATIVE_TO_PARENT:表示相對父View的百分比，如0.5f表示View自身大小的50%，1.0f表示View自身大小
 */
TranslateAnimation translateAnimation = new TranslateAnimation(
  Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.46f,
  Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0.46f);

使用時可根據需要選擇合適的構造方式創(chuàng)建 TranslateAnimation，測試效果如下：

縮放動畫(Scale)

縮放動畫對 View 就是對視圖進行一定程度的放大和縮小，可使用 xml 定義位移動畫也可以使用代碼創(chuàng)建位移動畫，縮放動畫對應的 Animation 的子類是 ScaleAnimation。

xml定義縮放動畫：在 res/anim 下創(chuàng)建一個 xml 文件 scale_anim.xml，在里面定義縮放動畫，具體如下：

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="1200"
 android:startOffset ="0"
 android:fillBefore = "true"
 android:fillAfter = "false"
 android:fillEnabled= "false"
 android:repeatMode = "reverse"
 android:repeatCount = "3"
 android:interpolator = "@android:anim/accelerate_interpolator"

 android:fromXScale="1"
 android:fromYScale="1"
 android:toXScale="3"
 android:toYScale="3"
 android:pivotX="50%"
 android:pivotY="50%">
</scale>

上述 xml 文件定義了一個縮放動畫文件，其中縮放動畫自有的屬性含義如下：

<!--設置水平方向上的起始縮放倍數-->
android:fromXScale="1"
<!--設置垂直方向上的起始縮放倍數-->
android:fromYScale="1"
<!--設置水平方向上的結束縮放倍數-->
android:toXScale="3"
<!--設置垂直方向上的結束縮放倍數-->
android:toYScale="3"
<!--設置縮放中心水平方向上的坐標-->
android:pivotX="50%"
<!--設置縮放中心垂直方向上的坐標-->
android:pivotY="50%">

其中 pivotX 和 pivotY 有三種設置方式：

數字：如50表示縮放中心相較 View 原點偏移 50px
百分比：如 50% 表示縮放中心相較 View 原點偏移 View 自身大小的 50%
百分比p：如 50%p 表示縮放中心相較 View 原點偏移父 View 自身大小的 50%

然后在 Activity 中獲取該 xml 文件對應的 ScaleAnimation，將其設置到想要設置位移動畫的 View 上即可，具體如下：

private void scale(){
 ScaleAnimation scaleAnimation = (ScaleAnimation) AnimationUtils.loadAnimation(this,R.anim.scale_anim);
 ivImage.startAnimation(scaleAnimation);
}

代碼創(chuàng)建縮放動畫：代碼創(chuàng)建縮放動畫使用 Animation 的子類 ScaleAnimation,使用時直接創(chuàng)建 ScaleAnimation 對象即可，具體如下：

//代碼創(chuàng)建縮放動畫
private void scale(){
 ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,3,
   Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
 scaleAnimation.setRepeatMode(Animation.REVERSE);
 scaleAnimation.setDuration(500);
 scaleAnimation.setRepeatCount(5);
 scaleAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
//  translateAnimation.setInterpolator(new AccelerateInterpolator());
 //...
 ivImage.startAnimation(scaleAnimation);
}

至于參數中的 pivotXType 和 pivotYType 和在上文中已經提到過，這里就不在贅述，測試效果如下：

旋轉動畫(Rotate)

旋轉動畫對 View 就是對視圖角度進行旋轉，可使用 xml 定義旋轉動畫也可以使用代碼創(chuàng)建旋轉動畫，旋轉動畫對應的 Animation 的子類是 RotateAnimation。

xml定義旋轉動畫：在 res/anim 下創(chuàng)建一個 xml 文件 rotate_anim.xml，在里面定義縮放動畫，具體如下：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="1200"
 android:startOffset ="0"
 android:fillBefore = "true"
 android:fillAfter = "false"
 android:fillEnabled= "false"
 android:repeatMode = "reverse"
 android:repeatCount = "5"
 android:interpolator = "@android:anim/accelerate_interpolator"

 android:fromDegrees="0"
 android:toDegrees="100"
 android:pivotY="50%"
 android:pivotX="50%">
</rotate>

上述 xml 文件定義了一個旋轉動畫文件，其中縮放動畫自有的屬性含義如下：

<!--設置動畫開始時的角度，正數表示順時針,負數表示逆時針-->
android:fromDegrees="0"
<!--設置動畫結束時的角度，正數表示順時針,負數表示逆時針-->
android:toDegrees="100"
<!--設置水平方向旋轉中心點的坐標-->
android:pivotY="50%"
<!--設置垂直方向旋轉中心點的坐標-->
android:pivotX="50%"

其中 pivotX 和 pivotY 有三種設置方式在上文中已經說明。然后在 Activity 中獲取該 xml 文件對應的 RotateAnimation，將其設置到想要設置旋轉動畫的 View 上即可，具體如下：

private void rotate(){
 RotateAnimation rotateAnimation = (RotateAnimation) AnimationUtils.loadAnimation(this,R.anim.rotate_anim);
 ivImage.startAnimation(rotateAnimation); 
}

代碼創(chuàng)建旋轉動畫：代碼創(chuàng)建旋轉動畫使用 Animation 的子類 RotateAnimation,使用時直接創(chuàng)建 RotateAnimation 對象即可，具體如下：

//代碼創(chuàng)建旋轉動畫
private void rotate(){
 RotateAnimation rotateAnimation = new RotateAnimation(0,100,
   Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
 rotateAnimation.setRepeatMode(Animation.REVERSE);
 rotateAnimation.setDuration(1200);
 rotateAnimation.setRepeatCount(3);
 rotateAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
//  translateAnimation.setInterpolator(new AccelerateInterpolator());
 //...
 ivImage.startAnimation(rotateAnimation);
}

測試效果如下：

透明度動畫(Alpha)

透明度動畫就是修改 View 的透明度，可使用 xml 定義透明度動畫也可以使用代碼創(chuàng)建透明度動畫，透明度動畫對應的 Animation 的子類是 AlphaAnimation。

xml定義透明度動畫：在 res/anim 下創(chuàng)建一個 xml 文件 alpha_anim.xml，在里面定義縮放動畫，具體如下：

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="3000"
 android:startOffset ="0"
 android:fillBefore = "true"
 android:fillAfter = "true"
 android:fillEnabled= "false"
 android:repeatMode = "restart"
 android:repeatCount = "0"
 android:interpolator = "@android:anim/accelerate_interpolator"

 android:fromAlpha="1"
 android:toAlpha="0">
</alpha>

上述 xml 文件定義了一個透明度動畫文件，其中透明度動畫自有的屬性含義如下：

<!--設置動畫的開始透明度，0表示透明，1表示不透明-->
android:fromAlpha="1"
<!--設置動畫的結束透明度，0表示透明，1表示不透明-->
android:toAlpha="0"

然后在 Activity 中獲取該 xml 文件對應的 AlphaAnimation，將其設置到想要設置旋轉動畫的 View 上即可，具體如下：

private void alpha(){
 AlphaAnimation alphaAnimation = (AlphaAnimation) AnimationUtils.loadAnimation(this,R.anim.alpha_anim);
 ivImage.startAnimation(alphaAnimation); 
}

代碼創(chuàng)建透明度動畫：代碼創(chuàng)建透明度動畫使用 Animation 的子類 AlphaAnimation,使用時直接創(chuàng)建 AlphaAnimation 對象即可，具體如下：

//代碼創(chuàng)建透明度動畫
private void alpha(){
 AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
 alphaAnimation.setRepeatMode(Animation.RESTART);
 alphaAnimation.setDuration(1500);
 alphaAnimation.setRepeatCount(3);
//  alphaAnimation.setInterpolator(this,android.R.anim.accelerate_decelerate_interpolator);
//  translateAnimation.setInterpolator(new AccelerateInterpolator());
 //...
 ivImage.startAnimation(alphaAnimation);
}

透明度動畫測試效果如下：

到此為止，位移、縮放、旋轉、透明度動畫的內容介紹完了，除了單獨使用這些動畫，還可以組合這些動畫實現更復雜的動畫，

組合動畫

組合動畫使用 AnimationSet 來實現，可使用 xml 定義組合動畫也可以使用代碼創(chuàng)建組合動畫，透明度動畫對應的 Animation 的子類是 AnimationSet。

xml定義組合動畫：在 res/anim 下創(chuàng)建一個 xml 文件 combine_anim.xml，在里面定義組合動畫，具體如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:duration="1200">

 <!--透明度動畫-->
 <alpha
  android:repeatMode="reverse"
  android:repeatCount="10"
  android:fromAlpha="1"
  android:toAlpha="0.5" />

 <!--旋轉動畫-->
 <rotate
  android:repeatMode="reverse"
  android:repeatCount="10"
  android:fromDegrees="0"
  android:pivotX="50%"
  android:pivotY="50%"
  android:toDegrees="360" />

 <!--縮放動畫-->
 <scale
  android:repeatMode="reverse"
  android:repeatCount="10"
  android:fromXScale="1"
  android:fromYScale="1"
  android:pivotX="50%"
  android:pivotY="50%"
  android:toXScale="3"
  android:toYScale="3" />
</set>

然后在 Activity 中獲取該 xml 文件對應的 AnimationSet，將其設置到想要設置旋轉動畫的 View 上即可，具體如下：

private void combine(){
 AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this,R.anim.combine_anim);
 ivImage.startAnimation(animationSet);
}

代碼創(chuàng)建組合動畫：代碼創(chuàng)建組合動畫使用 Animation 的子類 AnimationSet,使用時直接創(chuàng)建 AnimationSet 對象，將要組合的動畫按序添加到 AnimationSet 中，具體如下：

//代碼創(chuàng)建組合動畫
private void combine(){
 AnimationSet animationSet = new AnimationSet(true);
 AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.3f);
 alphaAnimation.setRepeatMode(Animation.REVERSE);
 alphaAnimation.setRepeatCount(3);
 RotateAnimation rotateAnimation = new RotateAnimation(0,360,
   Animation.RELATIVE_TO_SELF,0.5f,
   Animation.RELATIVE_TO_SELF,0.5f);
 rotateAnimation.setRepeatMode(Animation.REVERSE);
 rotateAnimation.setRepeatCount(3);
 ScaleAnimation scaleAnimation = new ScaleAnimation(1,3,1,3,
   Animation.RELATIVE_TO_SELF,0.5f,
   Animation.RELATIVE_TO_SELF,0.5f);
 scaleAnimation.setRepeatMode(Animation.REVERSE);
 scaleAnimation.setRepeatCount(3);

 animationSet.addAnimation(alphaAnimation);
 animationSet.addAnimation(rotateAnimation);
 animationSet.addAnimation(scaleAnimation);

 animationSet.setDuration(1200);
 //AnimationSet不支持動畫重復播放，如果想要組合動畫重復播放可設置每個動畫重復播放即可
//  animationSet.setRepeatMode(Animation.REVERSE);
//  animationSet.setRepeatCount(10);

 ivImage.startAnimation(animationSet);
}

組合動畫測試效果如下：

總結

這篇文章總結了 Android 開發(fā)中幀動畫(FrameAnimation)和補間動畫(TweenAnimation)的使用，下一篇將會介紹屬性動畫(ObjectAnimator )。

到此這篇關于Android動畫系列之幀動畫和補間動畫的示例代碼的文章就介紹到這了,更多相關Android幀動畫和補間動畫內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Android自定義View九宮格手勢密碼解鎖
這篇文章主要為大家詳細介紹了Android自定義View九宮格手勢密碼解鎖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07
Android 獲取傳感器列表整理及簡單實例
這篇文章主要介紹了Android 獲取傳感器列表整理及簡單實例的相關資料,需要的朋友可以參考下
2017-06-06
Android判斷設備網絡連接狀態(tài)及判斷連接方式的方法
這篇文章主要介紹了Android判斷設備網絡連接狀態(tài)及判斷連接方式的方法,涉及Android針對網絡連接的相關判定技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
Android startActivityForResult()代替方案示例
這篇文章主要為大家介紹了Android startActivityForResult()代替方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
Android中實現詞組高亮TextView方法示例
高亮顯示大家應該都不陌生，在開發(fā)中經常會遇到這個需求，所以下面這篇文章主要給大家介紹了關于Android中實現詞組高亮TextView的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-10-10
Android ViewPager撤消左右滑動切換功能實現代碼
這篇文章主要介紹了Android ViewPager撤消左右滑動切換功能實現代碼,需要的朋友可以參考下
2017-04-04
Android Native庫的加載及動態(tài)鏈接的過程
這篇文章主要介紹了Android Native庫的加載及動態(tài)鏈接的加載過程,需要的朋友可以參考下
2018-01-01
淺析Android的啟動原理
當談到Android啟動原理時,我們進入了Android操作系統的核心,理解Android系統啟動的原理對于開發(fā)者來說非常重要,因為這有助于優(yōu)化應用程序性能并提供更好的用戶體驗,本文給大家講講Android啟動原理,需要的朋友可以參考下
2023-10-10
android 關于利用簽名的SHA1進行安全校驗的方法之一(推薦)
下面小編就為大家?guī)硪黄猘ndroid 關于利用簽名的SHA1進行安全校驗的方法之一(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
詳解Android Libgdx中ScrollPane和Actor事件沖突問題的解決辦法
這篇文章主要介紹了詳解Android Libgdx中ScrollPane和Actor事件沖突問題的解決辦法的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-09-09