7. android動畫《一》補間動畫(Tween Animation)

安卓開發 · 發表 2019-02-15 23:45:51

摘要：補間動畫(Tween Animation).jpg 一. 作用物件 1.作用物件：檢視控制元件View。 2.不可作用於屬性或者其它物件。二. 原理 1.通過: 開始的檢視樣式 & 結束的檢視樣式、中間動畫變化過...

補間動畫(Tween Animation).jpg

一. 作用物件

1.作用物件：檢視控制元件View。

2.不可作用於屬性或者其它物件。

二. 原理

1.通過: 開始的檢視樣式 & 結束的檢視樣式、中間動畫變化過程由系統補全來確定一個動畫。

2.只是顯示的位置變動，View的實際位置未改變，表現為View移動到其他地方，點選事件仍在原處才能響應。

三. 優缺點

缺點：

當平移動畫執行完停在最後的位置，結果焦點還在原來的位置(控制元件的屬性沒有真的被改變)

優點：

製作方法簡單方便。只需要為動畫的第一個關鍵幀和最後一個關鍵幀建立內容，兩個關鍵幀之間幀的內容由Flash自動生成，不需要人為處理。
相對於逐幀動畫來說，補間動畫更為連貫自然。
相對於逐幀動畫來說，補間動畫的檔案更小，佔用記憶體少。

四. 分類

平移（Translate）
旋轉（Rotate）
縮放（Scale）
透明漸變（Alpha）
組合動畫(AnimationSet)

五. 使用方式

1. xml形式

res/anim目錄下

(1) 平移：translate_animation.xml

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

<translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100%"
android:toYDelta="100%"/>

<!--android:fromXDelta="0"水平方向x 移動的起始值-->
<!--android:fromYDelta="0"豎直方向y 移動的起始值-->
<!--android:toXDelta="100%"水平方向x 移動的結束值-->
<!--android:toYDelta="100%"豎直方向y 移動的結束值-->

</set>

(2) 旋轉：rotate_animation.xml

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

<rotate
android:pivotX="100%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="360"
android:drawable="@drawable/ic_launcher_foreground"
android:visible="true"/>

<!--android:pivotX="100%"旋轉中心X座標-->
<!--android:pivotY="50%"旋轉中心Y座標-->
<!--android:fromDegrees="0"旋轉起始角度位置-->
<!--android:toDegrees="360"旋轉結束角度位置-->

<!--android:drawable="@drawable/ic_launcher_foreground"暫時沒測試出來-->
<!--android:visible="true"-->
</set>

(3) 縮放：scale_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 縮放-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000">
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="2.0"
android:toYScale="2.0"
android:pivotX="100%"
android:pivotY="100%"/>

<!--0.0表示收縮到沒有；1.0表示正常無伸縮-->
<!--值小於1.0表示收縮；值大於1.0表示放大-->

<!--android:fromXScale="1.0"動畫在水平方向X的起始縮放倍數-->
<!--android:fromYScale="1.0"動畫開始前在豎直方向Y的起始縮放倍數-->
<!--android:toXScale="2.0"動畫在水平方向X的結束縮放倍數-->
<!--android:toYScale="2.0"動畫在豎直方向Y的結束縮放倍數-->
<!--android:pivotX="100%"縮放軸點的x座標-->
<!--android:pivotY="100%"縮放軸點的y座標-->
</set>

(4) 透明漸變：alpha_animation.xml

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

<!--android:fromAlpha="1.0"動畫開始時檢視的透明度(取值範圍: -1 ~ 1)-->
<!--android:toAlpha="0.0"動畫結束時檢視的透明度(取值範圍: -1 ~ 1)-->

</set>

(5) 組合動畫：group_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 組合動畫 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="5000"
android:startOffset="1000"
android:fillBefore="true"
android:fillAfter="false"
android:repeatMode="restart"
android:shareInterpolator="true">

<!-- 旋轉 -->
<rotate
android:duration="3000"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="360"
android:repeatMode="restart"
android:repeatCount="2"/>

<!-- 平移 -->
<translate
android:duration="10000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="800"
android:toYDelta="0"
android:repeatMode="restart"
android:repeatCount="3"/>




<!-- 組合動畫獨特的屬性-->
<!-- android:shareinterpolator = “true”-->
<!-- 表示組合動畫中的動畫是否和集合共享同一個差值器 -->
<!-- 如果集合不指定插值器，那麼子動畫需要單獨設定 -->

<!--// 以下引數是4種動畫效果的公共屬性,即都有的屬性-->
<!--android:duration="3000" // 動畫持續時間（ms），必須設定，動畫才有效果-->
<!--android:startOffset ="1000" // 動畫延遲開始時間（ms）-->
<!--android:fillBefore = “true” // 動畫播放完後，檢視是否會停留在動畫開始的狀態，預設為true-->
<!--android:fillAfter = “false” // 動畫播放完後，檢視是否會停留在動畫結束的狀態，優先於fillBefore值，預設為false-->
<!--android:fillEnabled= “true” // 是否應用fillBefore值，對fillAfter值無影響，預設為true-->
<!--android:repeatMode= “restart” // 選擇重複播放動畫模式，restart代表正序重放，reverse代表倒序回放，預設為restart|-->
<!--android:repeatCount = “0” // 重放次數（所以動畫的播放次數=重放次數+1），為infinite時無限重複-->
<!--android:interpolator = @[package:]anim/interpolator_resource // 插值器，即影響動畫的播放速度,下面會詳細講-->
</set>

Activity中呼叫xml

//平移
Animation translateAnimator = AnimationUtils.loadAnimation(this, R.anim.translate_animator);
//伸縮
Animation scaleAnimator = AnimationUtils.loadAnimation(this, R.anim.scale_animator);
//旋轉
Animation rotateAnimator = AnimationUtils.loadAnimation(this, R.anim.rotate_animator);
//漸變
Animation alphaAnimator = AnimationUtils.loadAnimation(this, R.anim.alpha_animator);
//組合
Animation groupAnimator = AnimationUtils.loadAnimation(this, R.anim.group_animator);

textView.startAnimation(groupAnimator);

2. java程式碼形式

//引數型別 建構函式按照(值的型別， 值)這樣的形式，如下：百分比
int type = Animation.RELATIVE_TO_SELF; //百分比

//平移
TranslateAnimation ranslateAnimator = new TranslateAnimation(0, 500, 0, 0);
//TranslateAnimation ranslateAnimator = new TranslateAnimation(type,0, type, 1, type,0, type, 1);
ranslateAnimator.setDuration(3000);

//伸縮
ScaleAnimation scaleAnimation = new ScaleAnimation(1, 2, 1, 2, type, 0.5f, type, 0.5f);
scaleAnimation.setDuration(3000);

//旋轉
RotateAnimation rotateAnimation = new RotateAnimation(0, 360, type, 0.5f, type, 0.5f);
rotateAnimation.setDuration(3000);

//漸變
AlphaAnimation alphaAnimation = new AlphaAnimation(1,0);
alphaAnimation.setDuration(3000);

//組合動畫
AnimationSet setAnimation = new AnimationSet(true);
setAnimation.setDuration(3000);
setAnimation.addAnimation(rotateAnimation);
setAnimation.addAnimation(ranslateAnimator);

textView.startAnimation(setAnimation);

總結：

xml優點：動畫描述的可讀性更好

程式碼優點：動畫效果可動態建立

六. 設定監聽

監聽器 Animation.AnimationListener。

public void setListener(Animation animation){
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
//開始
Toast.makeText(mContext, "開始", Toast.LENGTH_SHORT).show();
}

@Override
public void onAnimationEnd(Animation animation) {
//結束
Toast.makeText(mContext, "結束", Toast.LENGTH_SHORT).show();
}

@Override
public void onAnimationRepeat(Animation animation) {
//動畫重複執行的時候回撥
Toast.makeText(mContext, "重複執行", Toast.LENGTH_SHORT).show();
}
});

}