這是我這個(gè)系列的目錄，有興趣的可以看下： android 動(dòng)畫(huà)系列 - 目錄

tween 動(dòng)畫(huà)早些時(shí)候我們也叫補(bǔ)間動(dòng)畫(huà)(我也不知道為啥),現(xiàn)在也有叫 view 動(dòng)畫(huà)的。tween動(dòng)畫(huà)是2.X 時(shí)代的產(chǎn)物，因?yàn)樾Ч焕硐?#xff0c;4.X 時(shí)代推出了動(dòng)畫(huà)的升級(jí)版 屬性動(dòng)畫(huà)。給我的感覺(jué) 屬性動(dòng)畫(huà)就是tween動(dòng)畫(huà)的升級(jí)版，屬性動(dòng)畫(huà)就是替換 tween 的，現(xiàn)在來(lái)看也的確時(shí)這樣的，大部分的場(chǎng)景我們現(xiàn)在都是使用屬性動(dòng)畫(huà)的，只有一些較老的 api 中會(huì)使用 tween 動(dòng)畫(huà)。

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

tween 動(dòng)畫(huà)實(shí)現(xiàn)的的4種動(dòng)畫(huà)效果：

平移動(dòng)畫(huà) TranslateAnimation

縮放動(dòng)畫(huà) ScaleAnimation

旋轉(zhuǎn)動(dòng)畫(huà) RotateAnimation

透明度動(dòng)畫(huà) AlphaAnimation

對(duì)于tween 動(dòng)畫(huà)，目前使用的機(jī)會(huì)并不是很多了，使用時(shí)一般都是使用 定義好的動(dòng)畫(huà)xml文件，推薦大伙這么做。

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

通用 xml 屬性介紹

Snip20170722_18.png

上面這些都是我在定義 xml tween 動(dòng)畫(huà)時(shí)會(huì)用到的屬性，上面的表里基本上很全了，解釋的也很到位

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

tween 動(dòng)畫(huà)數(shù)值體系和坐標(biāo)體系

先來(lái)說(shuō)一下坐標(biāo)體系，這個(gè)屬于大家應(yīng)該熟記的，也是能猜測(cè)出來(lái)的，tween 動(dòng)畫(huà)時(shí)作用與 view 之上的，那么 tween 的坐標(biāo)體系也是以目標(biāo) view 的坐標(biāo)為參考的。具體來(lái)說(shuō)就是以 目標(biāo) view 的左上角為坐標(biāo)原點(diǎn)。明白這點(diǎn)我么再往下面看。

細(xì)心的朋友應(yīng)該會(huì)發(fā)現(xiàn)，我們?cè)谠O(shè)置 tween 動(dòng)畫(huà)參數(shù)時(shí)出現(xiàn)過(guò)3種不同的寫(xiě)法：30，30%，30%p。這3種寫(xiě)法有其不同的含義，我們來(lái)仔細(xì)看一下。

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

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

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

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

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

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

translate位移動(dòng)畫(huà)

效果圖：添加了自動(dòng)返回的代碼

ezgif.com-video-to-gif.gif

tween 動(dòng)畫(huà)我們可以使用 xml 來(lái)定義，也可以自己擼代碼

xml 定義：

android:duration="600"

android:fromXDelta="0"

android:fromYDelta="0"

android:repeatCount="1"

android:repeatMode="reverse"

android:toXDelta="100"

android:toYDelta="100"

/>

我們定義完 xml 文件后，不就是完事了，我們還得把動(dòng)畫(huà)綁定給一個(gè) view ，并開(kāi)始才能啟動(dòng)動(dòng)畫(huà)效果

Animation animation1 = AnimationUtils.loadAnimation(this, R.anim.tran1); // R.anim.tran1是我們定義號(hào)的動(dòng)畫(huà) xml

imageTest.startAnimation(animation1); // imageTest是要顯示動(dòng)畫(huà)的 view

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

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

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

fromXDelta/fromYDelta 是動(dòng)畫(huà)開(kāi)始時(shí) view x/y 軸的偏移量，一般我們都寫(xiě)0，

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

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

repeatCount 是動(dòng)畫(huà)的重復(fù)次數(shù)

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

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

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

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

java 代碼定義：

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

translateAnimation.setDuration(600);

translateAnimation.setRepeatMode(TranslateAnimation.REVERSE);

translateAnimation.setRepeatCount(1);

imageTest.startAnimation(translateAnimation);

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

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

讓我們來(lái)看看30%，上面使用的是100px，現(xiàn)在我們來(lái)看看100%是啥樣子的，看看和猜測(cè)的是不是一樣，向右位移自身尺寸的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ù)計(jì)的一樣，向右位移了 view 自身的寬高值，和明顯的能夠看出來(lái)

接下來(lái)讓我們看看 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é)點(diǎn)了，所以向右偏移量很大，直接出去了，大伙沒(méi)有沒(méi)想過(guò)要是給這個(gè) view 添加一個(gè)父控件，會(huì)怎么樣呢...讓我們來(lái)看看：

view 的大小是100dp，給view 添加一個(gè)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"/>

動(dòng)畫(huà)不變，還是設(shè)置80%p

效果圖：

ezgif.com-video-to-gif.gif

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

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

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

Snip20170724_20.png

效果圖：

ezgif.com-video-to-gif.gif

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

scale 縮放動(dòng)畫(huà)

效果圖：

ezgif.com-video-to-gif.gif

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

android:duration="600"

android:fillAfter="true"

android:fromXScale="1"

android:fromYScale="1"

android:toXScale="0.3"

android:toYScale="0.3"

/>

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

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

上面沒(méi)寫(xiě)縮放中心點(diǎn)設(shè)置，那么當(dāng)然中心點(diǎn)也是可以設(shè)置的，參數(shù)是：pivotX/pivotY，中心點(diǎn)的坐標(biāo)，比如中心點(diǎn)設(shè)置在 view 的中心，數(shù)值可以這樣寫(xiě)：50% 。寫(xiě)0.5表示偏移量是px 值。50%p表示中心點(diǎn)在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)動(dòng)畫(huà)

效果圖：

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 因?yàn)槭切D(zhuǎn)，所以參數(shù)肯定是設(shè)置的旋轉(zhuǎn)多少度，需要注意的是正數(shù)是順時(shí)針轉(zhuǎn)，負(fù)數(shù)是逆時(shí)針轉(zhuǎn)，其他的沒(méi)什么可說(shuō)的了。

alphe 透明度動(dòng)畫(huà)

效果圖：

ezgif.com-video-to-gif.gif

xml:

android:duration="600"

android:fillAfter="true"

android:fromAlpha="1"

android:toAlpha="0"

/>

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

tween動(dòng)畫(huà)的 repeat 重復(fù)模式

translate 的第一個(gè)效果圖就是使用了動(dòng)畫(huà)的重復(fù)模式的，簡(jiǎn)單的說(shuō)重復(fù)模式就是在動(dòng)畫(huà)結(jié)束后對(duì) view 進(jìn)行一些邏輯上的操作，可以重復(fù)執(zhí)行和反向執(zhí)行。

這里設(shè)計(jì)到2個(gè)參數(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%"

/>

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

repeatMode 分2種：

reverse 反向執(zhí)行動(dòng)畫(huà)，就是動(dòng)畫(huà)時(shí)怎么來(lái)的，就怎么回去

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

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

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

ezgif.com-video-to-gif.gif

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

ezgif.com-video-to-gif.gif

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

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

ezgif.com-video-to-gif.gif

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

AnimationSet 動(dòng)畫(huà)集合

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

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

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

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

監(jiān)聽(tīng)方法

差點(diǎn)忘了動(dòng)畫(huà)是可以加監(jiān)聽(tīng)的，很多時(shí)候我們?cè)趧?dòng)畫(huà)執(zhí)行完成后要做點(diǎn)什么不是嘛

animation1.setAnimationListener(new Animation.AnimationListener() {

@Override

public void onAnimationStart(Animation animation) {

}

@Override

public void onAnimationEnd(Animation animation) {

}

@Override

public void onAnimationRepeat(Animation animation) {

}

});

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

總結(jié)

好了最后讓我們來(lái)總結(jié)下使用時(shí)的注意點(diǎn)：

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

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

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

參考資料

總結(jié)

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

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