這是我這個系列的目錄，有興趣的可以看下： android 動畫系列 - 目錄

tween 動畫早些時候我們也叫補間動畫(我也不知道為啥),現(xiàn)在也有叫 view 動畫的。tween動畫是2.X 時代的產(chǎn)物，因為效果不理想，4.X 時代推出了動畫的升級版 屬性動畫。給我的感覺 屬性動畫就是tween動畫的升級版，屬性動畫就是替換 tween 的，現(xiàn)在來看也的確時這樣的，大部分的場景我們現(xiàn)在都是使用屬性動畫的，只有一些較老的 api 中會使用 tween 動畫。

既然tween 動畫和屬性動畫是承前啟后的關(guān)系，那么2者理所應(yīng)當(dāng)?shù)脑谑褂檬呛芟嗨?#xff0c;參數(shù)也很相似，這里有些參數(shù)我們在 tween 動畫這節(jié)中介紹過后，就不再屬性動畫中介紹了。

tween 動畫實現(xiàn)的的4種動畫效果：

平移動畫 TranslateAnimation

縮放動畫 ScaleAnimation

旋轉(zhuǎn)動畫 RotateAnimation

透明度動畫 AlphaAnimation

對于tween 動畫，目前使用的機會并不是很多了，使用時一般都是使用 定義好的動畫xml文件，推薦大伙這么做。

xml 文件定義的位置：/res/anim目錄下

通用 xml 屬性介紹

Snip20170722_18.png

上面這些都是我在定義 xml tween 動畫時會用到的屬性，上面的表里基本上很全了，解釋的也很到位

android:startOffset="100" 注意這個 startOffset 參數(shù)，這是動畫執(zhí)行的延遲時間，tween 動畫使用 startOffset 屬性，屬性動畫使用 delay 屬性，這是 tween 和屬性動畫在定義時需要注意的，話說使用同一個單詞不好嘛，非要用2個...

tween 動畫數(shù)值體系和坐標(biāo)體系

先來說一下坐標(biāo)體系，這個屬于大家應(yīng)該熟記的，也是能猜測出來的，tween 動畫時作用與 view 之上的，那么 tween 的坐標(biāo)體系也是以目標(biāo) view 的坐標(biāo)為參考的。具體來說就是以 目標(biāo) view 的左上角為坐標(biāo)原點。明白這點我么再往下面看。

細(xì)心的朋友應(yīng)該會發(fā)現(xiàn)，我們在設(shè)置 tween 動畫參數(shù)時出現(xiàn)過3種不同的寫法：30，30%，30%p。這3種寫法有其不同的含義，我們來仔細(xì)看一下。

參數(shù)數(shù)值體系，這里以平移來舉例：

30，以目標(biāo) view 的左上角為原點，讓 view 向右移動30px

30%，以目標(biāo) view 左上角為原點，讓 view 向右移動 view 寬度的30%

30%p，以目標(biāo) view 左上角為原點，讓 view 向右移動父容器寬度的30%

了解了 tween 動畫的坐標(biāo)系，再來看動畫的數(shù)值參數(shù)，移動的方向大伙都應(yīng)該知道了，那么具體上面3種寫法就是偏移量的不同了，30是 px 像素，30%是以 view 自身寬高算的，30%p 是以 view 的父容器的寬高算的

縮放，旋轉(zhuǎn)動畫的中心點大伙應(yīng)該都恩那個猜出來是view 的左上角了吧，我們學(xué)習(xí)很重要的一點就是舉一反三，看破一點，總攬全局。

translate位移動畫

效果圖：添加了自動返回的代碼

ezgif.com-video-to-gif.gif

tween 動畫我們可以使用 xml 來定義，也可以自己擼代碼

xml 定義：

android:duration="600"

android:fromXDelta="0"

android:fromYDelta="0"

android:repeatCount="1"

android:repeatMode="reverse"

android:toXDelta="100"

android:toYDelta="100"

/>

我們定義完 xml 文件后，不就是完事了，我們還得把動畫綁定給一個 view ，并開始才能啟動動畫效果

Animation animation1 = AnimationUtils.loadAnimation(this, R.anim.tran1); // R.anim.tran1是我們定義號的動畫 xml

imageTest.startAnimation(animation1); // imageTest是要顯示動畫的 view

這樣我們就可以使用tween 動畫了，當(dāng)然這是最簡單的使用方式了，注意看所有的 tween 動畫的都實現(xiàn)了 Animation接口。

對于 xml 的定義，雖然上面介紹過參數(shù)的含義了，我在這里還是說一下的好，便于理解啊。

duration 是動畫執(zhí)行時間，我們要是不寫的話，默認(rèn)是300ms，在 xml 中，時間都是以 ms 為單位的

fromXDelta/fromYDelta 是動畫開始時 view x/y 軸的偏移量，一般我們都寫0，

toXDelta/toYDelta 是位移動畫在 view x/y 軸上最終的偏移量，也可以理解為我們想讓 view 到達的新位置，也可以理解為動畫的執(zhí)行幅度

repeatMode 是動畫的重復(fù)模式，有2個模式：reverse/restart。 reverse是回復(fù)原狀，restart是重復(fù)執(zhí)行。

repeatCount 是動畫的重復(fù)次數(shù)

Animator.setRepeatCount(ValueAnimator.INFINITE) 也可以實現(xiàn)重復(fù)執(zhí)行的效果

fillAfter 動畫執(zhí)行后是否保留 view 所在的新位置， true 保留，false 回歸初始位置

fillBefore 和fillAfter不一樣，不論是 true 還是 false，都會回歸初始位置

這里注意 repeatMode/repeatCount ，這2個參數(shù)必須都寫才有意思，只寫一個是不成立的，我在下面會專門說下重復(fù)模式和重復(fù)次數(shù)的問題，這個和大家想象有些不一樣，我可是專門都跑了一遍才清楚的。

java 代碼定義：

TranslateAnimation translateAnimation = new TranslateAnimation(0, 100, 0, 100);

translateAnimation.setDuration(600);

translateAnimation.setRepeatMode(TranslateAnimation.REVERSE);

translateAnimation.setRepeatCount(1);

imageTest.startAnimation(translateAnimation);

我們也是可以 new 一個 tween 動畫的直接實現(xiàn)類出來的，這里使用的是 TranslateAnimation 最簡單的構(gòu)造函數(shù)

上面說了 tween 動畫有3種參數(shù)形式：30，30%，30%p，這里我們就來試試看啊，不試試怎么能清楚尼...

讓我們來看看30%，上面使用的是100px，現(xiàn)在我們來看看100%是啥樣子的，看看和猜測的是不是一樣，向右位移自身尺寸的100%后，應(yīng)該是靠近右側(cè)邊緣了

android:duration="600"

android:fillAfter="true"

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="100%"

android:toYDelta="100%"

/>

效果圖:

ezgif.com-video-to-gif.gif

啊，和我們預(yù)計的一樣，向右位移了 view 自身的寬高值，和明顯的能夠看出來

接下來讓我們看看 30%p，為了效果明顯，數(shù)值這里使用了 80%p

android:duration="600"

android:fillAfter="true"

android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="80%p"

android:toYDelta="80%p"

/>

效果圖：

ezgif.com-video-to-gif.gif

哈哈，大伙注意啊，這里 view 的父控件可是根視圖節(jié)點了，所以向右偏移量很大，直接出去了，大伙沒有沒想過要是給這個 view 添加一個父控件，會怎么樣呢...讓我們來看看：

view 的大小是100dp，給view 添加一個200dp 的外殼，藍(lán)色背景

xml布局：

android:layout_width="200dp"

android:layout_height="200dp"

android:layout_centerHorizontal="true"

android:background="@color/colorPrimary">

android:id="@+id/acg"

android:layout_width="100dp"

android:layout_height="100dp"

android:layout_centerInParent="true"

android:layout_marginTop="50dp"

android:src="@color/colorAccent"/>

動畫不變，還是設(shè)置80%p

效果圖：

ezgif.com-video-to-gif.gif

啊嘞，咱們的粉色的 view 怎么沒了，啦啦啦，大伙不知道平時注意沒有，viewGroup 是不允許子控件超出自己的范圍的，所以咱們的 view 在位移出父控件的范圍后就消失不見了，這里我們需要設(shè)置一下：

需要在布局根節(jié)點設(shè)置android:clipChildren="false"才行，注意不是在這個父控件設(shè)置，是在 xml 的根節(jié)點設(shè)置，這點要注意啊，看我的這篇文章 Android 布局小技巧匯總

xml 根節(jié)點設(shè)置 android:clipChildren="false" 才行

Snip20170724_20.png

效果圖：

ezgif.com-video-to-gif.gif

這樣接可以看到效果了，這次位移的幅度就是我們添加的這個200dp 的父控件了

scale 縮放動畫

效果圖：

ezgif.com-video-to-gif.gif

這是縮放的效果，和預(yù)想的有點不同的是，縮放中心點怎么不是 view 的中心呢，那么我們來看下 xml 代碼：

android:duration="600"

android:fillAfter="true"

android:fromXScale="1"

android:fromYScale="1"

android:toXScale="0.3"

android:toYScale="0.3"

/>

恩，看上面的 xml 設(shè)置中，里面沒有設(shè)置縮放中心點的參數(shù)，那么上面的縮放就是走的是默認(rèn)設(shè)置了，可以看到：縮放的默認(rèn)中心點是 view 的左上角，這也是 tween 動畫坐標(biāo)系的原點，從這一點考慮也是可以理解默認(rèn)中心點在左上角的設(shè)置了。

上面 xml 中屬性的設(shè)置很好理解，fromXX是動畫開始的數(shù)值，toXX 是動畫結(jié)束時的數(shù)值，這里說一下，縮放的數(shù)值 1 是原始大小，0是沒有大小，2是原始大小的2倍，所以說縮放的參數(shù)很好理解。

上面沒寫縮放中心點設(shè)置，那么當(dāng)然中心點也是可以設(shè)置的，參數(shù)是：pivotX/pivotY，中心點的坐標(biāo)，比如中心點設(shè)置在 view 的中心，數(shù)值可以這樣寫：50% 。寫0.5表示偏移量是px 值。50%p表示中心點在view 的左上角坐標(biāo)+父容器的寬高的一半之后的位置

xml

android:duration="600"

android:fillAfter="true"

android:fromXScale="1"

android:fromYScale="1"

android:pivotX="50%"

android:pivotY="50%"

android:toXScale="0.3"

android:toYScale="0.3"

/>

效果圖：

ezgif.com-video-to-gif.gif

rotate 旋轉(zhuǎn)動畫

效果圖：

ezgif.com-video-to-gif.gif

xml：

android:duration="600"

android:fillAfter="true"

android:fromDegrees="0"

android:pivotX="50%"

android:pivotY="50%"

android:toDegrees="360"

/>

rotate 和 scale 差不多，除了數(shù)值不同，其他都一樣。rotate 因為是旋轉(zhuǎn)，所以參數(shù)肯定是設(shè)置的旋轉(zhuǎn)多少度，需要注意的是正數(shù)是順時針轉(zhuǎn)，負(fù)數(shù)是逆時針轉(zhuǎn)，其他的沒什么可說的了。

alphe 透明度動畫

效果圖：

ezgif.com-video-to-gif.gif

xml:

android:duration="600"

android:fillAfter="true"

android:fromAlpha="1"

android:toAlpha="0"

/>

哈哈，看完上面的 alphe透明度動畫很簡單了吧，注意數(shù)值1是不透明，0是完全透明。

tween動畫的 repeat 重復(fù)模式

translate 的第一個效果圖就是使用了動畫的重復(fù)模式的，簡單的說重復(fù)模式就是在動畫結(jié)束后對 view 進行一些邏輯上的操作，可以重復(fù)執(zhí)行和反向執(zhí)行。

這里設(shè)計到2個參數(shù)設(shè)置： repeatMode / repeatCount，重復(fù)模式 / 重復(fù)次數(shù)

先看一下xml 的屬性設(shè)置

android:duration="600"

android:fillAfter="true"

android:fromXDelta="0"

android:fromYDelta="0"

android:repeatCount="1"

android:repeatMode="reverse"

android:toXDelta="80%"

android:toYDelta="80%"

/>

這里一個位移動畫，里面設(shè)置有重復(fù)模式和重復(fù)次數(shù)。首先說明一下，repeatMode和repeatCount二者缺一不可，必須都得寫才能生效

repeatMode 分2種：

reverse 反向執(zhí)行動畫，就是動畫時怎么來的，就怎么回去

restart 重復(fù)執(zhí)行動畫，就是動畫反復(fù)執(zhí)行，不過注意動畫結(jié)束后就會回到初始位置，顯得有些突兀

我們來看看效果是什么樣的，這樣才好理解不是，注意這里 repeatCount 都是設(shè)置為1

reverse 反向執(zhí)行效果圖：

ezgif.com-video-to-gif.gif

restart 重復(fù)執(zhí)行效果圖：

ezgif.com-video-to-gif.gif

這里使用了高采樣率轉(zhuǎn)換的 gif，可以很 清楚的看出來在第一次動畫執(zhí)行完后瞬間 view 就回歸到了初始位置再執(zhí)行了一次動畫，中間切換的效果太突兀了，不是很友好。

好了看完了 repeatMode ，那么大家來猜測下 repeatCount 重復(fù)次數(shù)的使用規(guī)律，其實看完上面的都應(yīng)該明白了，重復(fù)次數(shù)是指動畫在執(zhí)行完成后再按照某種方式執(zhí)行多少次，我們寫在 repeatCount 里面的數(shù)字是不包含第一次的，注意這點基本就可以了，比如我們想讓上面這個動畫來回執(zhí)行2個大循環(huán)，既動畫執(zhí)行完后反向執(zhí)行一次這算一個大循環(huán)，那么repeatCount我們寫幾呢，是3，不算第一次，大伙算算，自己試試，下面是效果圖：

ezgif.com-video-to-gif.gif

好了是不是很咱們想的一樣，自己多動手，多試試，google 的 api 基本我們都能搞明白。

AnimationSet 動畫集合

android 中的動畫不單單可以單獨執(zhí)行一種效果，更是可以多個動畫效果一起執(zhí)行的。下面看個例子：

android:duration="600"

android:interpolator="@android:anim/accelerate_decelerate_interpolator"

android:shareInterpolator="true">

android:fromXDelta="0"

android:fromYDelta="0"

android:repeatCount="1"

android:repeatMode="reverse"

android:toXDelta="80%"

android:toYDelta="80%"/>

android:fromAlpha="1"

android:repeatCount="1"

android:repeatMode="reverse"

android:toAlpha="0.2"/>

效果圖：

ezgif.com-video-to-gif.gif

單個動畫中有的參數(shù)可以寫到 set 動畫集合中去，比如時間，但是重復(fù)這塊就不行了，我需要寫到單個里才行

set 中有2個新的屬性 interpolator 這個是插值器，是控制動畫執(zhí)行曲線的，系統(tǒng)提供的默認(rèn)值就夠我們使用的了，shareInterpolator 是設(shè)置所有的單項動畫是否都使用 set 中的這個插值器，具體的插值器我們下節(jié)說，一看就懂

監(jiān)聽方法

差點忘了動畫是可以加監(jiān)聽的，很多時候我們在動畫執(zhí)行完成后要做點什么不是嘛

animation1.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

}

@Override

public void onAnimationEnd(Animation animation) {

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

AniamtionSet 動畫集合也是可以添加監(jiān)聽的。上面的代碼中提供了3個回調(diào)函數(shù)，中規(guī)中矩，開始，結(jié)束，重復(fù)。

總結(jié)

好了最后讓我們來總結(jié)下使用時的注意點：

4種動畫，位移支持3種參數(shù)形式，其他的不行

重復(fù)模式和重復(fù)次數(shù)要搞清楚

tween 動畫雖然現(xiàn)在用的機會很少了，但是這是 android 動畫的基礎(chǔ)，之后的屬性動畫在使用時參數(shù)也是大體沒有變化的。所以學(xué)好 tween 動畫，有其是期中一些參數(shù)的數(shù)值范圍，效果是很有必要的。好了就這么多了，更多的在參考資料里啦

參考資料

總結(jié)

以上是生活随笔為你收集整理的android 同根动画_android 动画系列 (1) - tween 动画(view动画)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。