android 同根动画_android 动画系列 (1) - tween 动画(view动画)
這是我這個系列的目錄，有興趣的可以看下： android 動畫系列 - 目錄
tween 動畫早些時候我們也叫補間動畫(我也不知道為啥),現在也有叫 view 動畫的。tween動畫是2.X 時代的產物，因為效果不理想，4.X 時代推出了動畫的升級版 屬性動畫。給我的感覺 屬性動畫就是tween動畫的升級版，屬性動畫就是替換 tween 的，現在來看也的確時這樣的，大部分的場景我們現在都是使用屬性動畫的，只有一些較老的 api 中會使用 tween 動畫。
既然tween 動畫和屬性動畫是承前啟后的關系，那么2者理所應當的在使用是很相似，參數也很相似，這里有些參數我們在 tween 動畫這節中介紹過后，就不再屬性動畫中介紹了。
tween 動畫實現的的4種動畫效果：
平移動畫 TranslateAnimation
縮放動畫 ScaleAnimation
旋轉動畫 RotateAnimation
透明度動畫 AlphaAnimation
對于tween 動畫，目前使用的機會并不是很多了，使用時一般都是使用 定義好的動畫xml文件，推薦大伙這么做。
xml 文件定義的位置：/res/anim目錄下
通用 xml 屬性介紹
Snip20170722_18.png
上面這些都是我在定義 xml tween 動畫時會用到的屬性，上面的表里基本上很全了，解釋的也很到位
android:startOffset="100" 注意這個 startOffset 參數，這是動畫執行的延遲時間，tween 動畫使用 startOffset 屬性，屬性動畫使用 delay 屬性，這是 tween 和屬性動畫在定義時需要注意的，話說使用同一個單詞不好嘛，非要用2個...
tween 動畫數值體系和坐標體系
先來說一下坐標體系，這個屬于大家應該熟記的，也是能猜測出來的，tween 動畫時作用與 view 之上的，那么 tween 的坐標體系也是以目標 view 的坐標為參考的。具體來說就是以 目標 view 的左上角為坐標原點。明白這點我么再往下面看。
細心的朋友應該會發現，我們在設置 tween 動畫參數時出現過3種不同的寫法：30，30%，30%p。這3種寫法有其不同的含義，我們來仔細看一下。
參數數值體系，這里以平移來舉例：
30，以目標 view 的左上角為原點，讓 view 向右移動30px
30%，以目標 view 左上角為原點，讓 view 向右移動 view 寬度的30%
30%p，以目標 view 左上角為原點，讓 view 向右移動父容器寬度的30%
了解了 tween 動畫的坐標系，再來看動畫的數值參數，移動的方向大伙都應該知道了，那么具體上面3種寫法就是偏移量的不同了，30是 px 像素，30%是以 view 自身寬高算的，30%p 是以 view 的父容器的寬高算的
縮放，旋轉動畫的中心點大伙應該都恩那個猜出來是view 的左上角了吧，我們學習很重要的一點就是舉一反三，看破一點，總攬全局。
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 動畫了，當然這是最簡單的使用方式了，注意看所有的 tween 動畫的都實現了 Animation接口。
對于 xml 的定義，雖然上面介紹過參數的含義了，我在這里還是說一下的好，便于理解啊。
duration 是動畫執行時間，我們要是不寫的話，默認是300ms，在 xml 中，時間都是以 ms 為單位的
fromXDelta/fromYDelta 是動畫開始時 view x/y 軸的偏移量，一般我們都寫0，
toXDelta/toYDelta 是位移動畫在 view x/y 軸上最終的偏移量，也可以理解為我們想讓 view 到達的新位置，也可以理解為動畫的執行幅度
repeatMode 是動畫的重復模式，有2個模式：reverse/restart。 reverse是回復原狀，restart是重復執行。
repeatCount 是動畫的重復次數
Animator.setRepeatCount(ValueAnimator.INFINITE) 也可以實現重復執行的效果
fillAfter 動畫執行后是否保留 view 所在的新位置， true 保留，false 回歸初始位置
fillBefore 和fillAfter不一樣，不論是 true 還是 false，都會回歸初始位置
這里注意 repeatMode/repeatCount ，這2個參數必須都寫才有意思，只寫一個是不成立的，我在下面會專門說下重復模式和重復次數的問題，這個和大家想象有些不一樣，我可是專門都跑了一遍才清楚的。
java 代碼定義：
TranslateAnimation translateAnimation = new TranslateAnimation(0, 100, 0, 100);
translateAnimation.setDuration(600);
translateAnimation.setRepeatMode(TranslateAnimation.REVERSE);
translateAnimation.setRepeatCount(1);
imageTest.startAnimation(translateAnimation);
我們也是可以 new 一個 tween 動畫的直接實現類出來的，這里使用的是 TranslateAnimation 最簡單的構造函數
上面說了 tween 動畫有3種參數形式：30，30%，30%p，這里我們就來試試看啊，不試試怎么能清楚尼...
讓我們來看看30%，上面使用的是100px，現在我們來看看100%是啥樣子的，看看和猜測的是不是一樣，向右位移自身尺寸的100%后，應該是靠近右側邊緣了
android:duration="600"
android:fillAfter="true"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="100%"
android:toYDelta="100%"
/>
效果圖:
ezgif.com-video-to-gif.gif
啊，和我們預計的一樣，向右位移了 view 自身的寬高值，和明顯的能夠看出來
接下來讓我們看看 30%p，為了效果明顯，數值這里使用了 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 的父控件可是根視圖節點了，所以向右偏移量很大，直接出去了，大伙沒有沒想過要是給這個 view 添加一個父控件，會怎么樣呢...讓我們來看看：
view 的大小是100dp，給view 添加一個200dp 的外殼，藍色背景
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"/>
動畫不變，還是設置80%p
效果圖：
ezgif.com-video-to-gif.gif
啊嘞，咱們的粉色的 view 怎么沒了，啦啦啦，大伙不知道平時注意沒有，viewGroup 是不允許子控件超出自己的范圍的，所以咱們的 view 在位移出父控件的范圍后就消失不見了，這里我們需要設置一下：
需要在布局根節點設置android:clipChildren="false"才行，注意不是在這個父控件設置，是在 xml 的根節點設置，這點要注意啊，看我的這篇文章 Android 布局小技巧匯總
xml 根節點設置 android:clipChildren="false" 才行
Snip20170724_20.png
效果圖：
ezgif.com-video-to-gif.gif
這樣接可以看到效果了，這次位移的幅度就是我們添加的這個200dp 的父控件了
scale 縮放動畫
效果圖：
ezgif.com-video-to-gif.gif
這是縮放的效果，和預想的有點不同的是，縮放中心點怎么不是 view 的中心呢，那么我們來看下 xml 代碼：
android:duration="600"
android:fillAfter="true"
android:fromXScale="1"
android:fromYScale="1"
android:toXScale="0.3"
android:toYScale="0.3"
/>
恩，看上面的 xml 設置中，里面沒有設置縮放中心點的參數，那么上面的縮放就是走的是默認設置了，可以看到：縮放的默認中心點是 view 的左上角，這也是 tween 動畫坐標系的原點，從這一點考慮也是可以理解默認中心點在左上角的設置了。
上面 xml 中屬性的設置很好理解，fromXX是動畫開始的數值，toXX 是動畫結束時的數值，這里說一下，縮放的數值 1 是原始大小，0是沒有大小，2是原始大小的2倍，所以說縮放的參數很好理解。
上面沒寫縮放中心點設置，那么當然中心點也是可以設置的，參數是：pivotX/pivotY，中心點的坐標，比如中心點設置在 view 的中心，數值可以這樣寫：50% 。寫0.5表示偏移量是px 值。50%p表示中心點在view 的左上角坐標+父容器的寬高的一半之后的位置
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 旋轉動畫
效果圖：
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 差不多，除了數值不同，其他都一樣。rotate 因為是旋轉，所以參數肯定是設置的旋轉多少度，需要注意的是正數是順時針轉，負數是逆時針轉，其他的沒什么可說的了。
alphe 透明度動畫
效果圖：
ezgif.com-video-to-gif.gif
xml:
android:duration="600"
android:fillAfter="true"
android:fromAlpha="1"
android:toAlpha="0"
/>
哈哈，看完上面的 alphe透明度動畫很簡單了吧，注意數值1是不透明，0是完全透明。
tween動畫的 repeat 重復模式
translate 的第一個效果圖就是使用了動畫的重復模式的，簡單的說重復模式就是在動畫結束后對 view 進行一些邏輯上的操作，可以重復執行和反向執行。
這里設計到2個參數設置： repeatMode / repeatCount，重復模式 / 重復次數
先看一下xml 的屬性設置
android:duration="600"
android:fillAfter="true"
android:fromXDelta="0"
android:fromYDelta="0"
android:repeatCount="1"
android:repeatMode="reverse"
android:toXDelta="80%"
android:toYDelta="80%"
/>
這里一個位移動畫，里面設置有重復模式和重復次數。首先說明一下，repeatMode和repeatCount二者缺一不可，必須都得寫才能生效
repeatMode 分2種：
reverse 反向執行動畫，就是動畫時怎么來的，就怎么回去
restart 重復執行動畫，就是動畫反復執行，不過注意動畫結束后就會回到初始位置，顯得有些突兀
我們來看看效果是什么樣的，這樣才好理解不是，注意這里 repeatCount 都是設置為1
reverse 反向執行效果圖：
ezgif.com-video-to-gif.gif
restart 重復執行效果圖：
ezgif.com-video-to-gif.gif
這里使用了高采樣率轉換的 gif，可以很 清楚的看出來在第一次動畫執行完后瞬間 view 就回歸到了初始位置再執行了一次動畫，中間切換的效果太突兀了，不是很友好。
好了看完了 repeatMode ，那么大家來猜測下 repeatCount 重復次數的使用規律，其實看完上面的都應該明白了，重復次數是指動畫在執行完成后再按照某種方式執行多少次，我們寫在 repeatCount 里面的數字是不包含第一次的，注意這點基本就可以了，比如我們想讓上面這個動畫來回執行2個大循環，既動畫執行完后反向執行一次這算一個大循環，那么repeatCount我們寫幾呢，是3，不算第一次，大伙算算，自己試試，下面是效果圖：
ezgif.com-video-to-gif.gif
好了是不是很咱們想的一樣，自己多動手，多試試，google 的 api 基本我們都能搞明白。
AnimationSet 動畫集合
android 中的動畫不單單可以單獨執行一種效果，更是可以多個動畫效果一起執行的。下面看個例子：
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
單個動畫中有的參數可以寫到 set 動畫集合中去，比如時間，但是重復這塊就不行了，我需要寫到單個里才行
set 中有2個新的屬性 interpolator 這個是插值器，是控制動畫執行曲線的，系統提供的默認值就夠我們使用的了，shareInterpolator 是設置所有的單項動畫是否都使用 set 中的這個插值器，具體的插值器我們下節說，一看就懂
監聽方法
差點忘了動畫是可以加監聽的，很多時候我們在動畫執行完成后要做點什么不是嘛
animation1.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
AniamtionSet 動畫集合也是可以添加監聽的。上面的代碼中提供了3個回調函數，中規中矩，開始，結束，重復。
總結
好了最后讓我們來總結下使用時的注意點：
4種動畫，位移支持3種參數形式，其他的不行
重復模式和重復次數要搞清楚
tween 動畫雖然現在用的機會很少了，但是這是 android 動畫的基礎，之后的屬性動畫在使用時參數也是大體沒有變化的。所以學好 tween 動畫，有其是期中一些參數的數值范圍，效果是很有必要的。好了就這么多了，更多的在參考資料里啦
參考資料
總結
以上是生活随笔為你收集整理的android 同根动画_android 动画系列 (1) - tween 动画(view动画)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软件项目管理相关概念介绍笔记
- 下一篇： 51学吧