#### 7.3.4 對任意屬性做動畫 這里先提出一個問題：給Button加一個動畫，讓這個Button的寬度從當前寬度增加到500px。也許你會說，這很簡單，用View動畫就可以搞定，我們可以來試試，你能寫出來嗎？很快你就會恍然大悟，原來View動畫根本不支持對寬度進行動畫。沒錯，View動畫只支持四種類型：平移（Translate）、旋轉（Rotate）、縮放（Scale）、不透明度（Alpha）。當然用x方向縮放（scaleX）可以讓Button在x方向放大，看起來好像是寬度增加了，實際上不是，只是Button被放大了而已，而且由于只x方向被放大，這個時候Button的背景以及上面的文本都被拉伸了，甚至有可能Button會超出屏幕，如圖7-2所示。 :-:  圖7-2 屬性動畫的縮放效果 圖7-2中的效果顯然是很差的，而且也不是真正地對寬度做動畫，不過，所幸我們還有屬性動畫，我們用屬性動畫試試，如下所示。 private void performAnimate() { ObjectAnimator.ofInt(mButton, "width", 500).setDuration(5000).start(); } @Override public void onClick(View v) { if (v == mButton) { performAnimate(); } } 上述代碼運行后發現沒效果，其實沒效果是對的，如果隨便傳遞一個屬性過去，輕則沒動畫效果，重則程序直接Crash。 下面分析屬性動畫的原理：屬性動畫要求動畫作用的對象提供該屬性的get和set方法，屬性動畫根據外界傳遞的該屬性的初始值和最終值，以動畫的效果多次去調用set方法，每次傳遞給set方法的值都不一樣，確切來說是隨著時間的推移，所傳遞的值越來越接近最終值。總結一下，我們對object的屬性abc做動畫，如果想讓動畫生效，要同時滿足兩個條件： * （1）object必須要提供setAbc方法，如果動畫的時候沒有傳遞初始值，那么還要提供getAbc方法，因為系統要去取abc屬性的初始值（如果這條不滿足，程序直接Crash）。 * （2）object的setAbc對屬性abc所做的改變必須能夠通過某種方法反映出來，比如會帶來UI的改變之類的（如果這條不滿足，動畫無效果但不會Crash）。 以上條件缺一不可。那么為什么我們對Button的width屬性做動畫會沒有效果？這是因為Button內部雖然提供了getWidth和setWidth方法，但是這個setWidth方法并不是改變視圖的大小，它是TextView新添加的方法，View是沒有這個setWidth方法的，由于Button繼承了TextView，所以Button也就有了setWidth方法。下面看一下這個getWidth和setWidth方法的源碼： /＊＊ ＊ Makes the TextView exactly this many pixels wide. ＊ You could do the same thing by specifying this number in the ＊ LayoutParams. ＊ ＊ @see #setMaxWidth(int) ＊ @see #setMinWidth(int) ＊ @see #getMinWidth() ＊ @see #getMaxWidth() ＊ ＊ @attr ref android.R.styleable#TextView_width ＊/ @android.view.RemotableViewMethod public void setWidth(int pixels) { mMaxWidth = mMinWidth = pixels; mMaxWidthMode = mMinWidthMode = PIXELS; requestLayout(); invalidate(); } /＊＊ ＊ Return the width of the your view. ＊ ＊ @return The width of your view, in pixels. ＊/ @ViewDebug.ExportedProperty(category = "layout") public final int getWidth() { return mRight - mLeft; } 從上述源碼可以看出，getWidth的確是獲取View的寬度的，而setWidth是TextView和其子類的專屬方法，它的作用不是設置View的寬度，而是設置TextView的最大寬度和最小寬度的，這個和TextView的寬度不是一個東西。具體來說，TextView的寬度對應XML中的android:layout_width屬性，而TextView還有一個屬性android:width，這個android:width屬性就對應了TextView的setWidth方法。總之，TextView和Button的setWidth、getWidth干的不是同一件事情，通過setWidth無法改變控件的寬度，所以對width做屬性動畫沒有效果。對應于屬性動畫的兩個條件來說，本例中動畫不生效的原因是只滿足了條件1而未滿足條件2。 * 針對上述問題，官方文檔上告訴我們有3種解決方法： * · 給你的對象加上get和set方法，如果你有權限的話； * · 用一個類來包裝原始對象，間接為其提供get和set方法； * · 采用ValueAnimator，監聽動畫過程，自己實現屬性的改變。 針對上面提出的三種解決方法，下面給出具體的介紹。 * 1．給你的對象加上get和set方法，如果你有權限的話 這個的意思很好理解，如果你有權限的話，加上get和set就搞定了。但是很多時候我們沒權限去這么做。比如本文開頭所提到的問題，你無法給Button加上一個合乎要求的setWidth方法，因為這是Android SDK內部實現的。這個方法最簡單，但是往往是不可行的，這里就不對其進行更多的分析了。 * 2．用一個類來包裝原始對象，間接為其提供get和set方法 這是一個很有用的解決方法，是筆者最喜歡用的，因為用起來很方便，也很好理解，下面將通過一個具體的例子來介紹它。 private void performAnimate() { ViewWrapper wrapper = new ViewWrapper(mButton); ObjectAnimator.ofInt(wrapper, "width", 500).setDuration(5000).start(); } @Override public void onClick(View v) { if (v == mButton) { performAnimate(); } } private static class ViewWrapper { private View mTarget; public ViewWrapper(View target) { mTarget = target; } public int getWidth() { return mTarget.getLayoutParams().width; } public void setWidth(int width) { mTarget.getLayoutParams().width = width; mTarget.requestLayout(); } } 上述代碼在5s內讓Button的寬度增加到了500px，為了達到這個效果，我們提供了ViewWrapper類專門用于包裝View，具體到本例是包裝Button。然后我們對ViewWrapper的width屬性做動畫，并且在setWidth方法中修改其內部的target的寬度，而target實際上就是我們包裝的Button。這樣一個間接屬性動畫就搞定了，上述代碼同樣適用于一個對象的其他屬性。如圖7-3所示，很顯然效果達到了，真正實現了對寬度做動畫。 :-:  圖7-3 屬性動畫對寬度做動畫的效果 * 3．采用VaIueAnimator，監聽動畫過程，自己實現屬性的改變 首先說說什么是ValueAnimator, ValueAnimator本身不作用于任何對象，也就是說直接使用它沒有任何動畫效果。它可以對一個值做動畫，然后我們可以監聽其動畫過程，在動畫過程中修改我們的對象的屬性值，這樣也就相當于我們的對象做了動畫。下面用例子來說明： private void performAnimate(final View target, final int start, final int end) { ValueAnimator valueAnimator = ValueAnimator.ofInt(1, 100); valueAnimator.addUpdateListener(new AnimatorUpdateListener() { // 持有一個IntEvaluator對象，方便下面估值的時候使用 private IntEvaluator mEvaluator = new IntEvaluator(); @Override public void onAnimationUpdate(ValueAnimator animator) { // 獲得當前動畫的進度值，整型，1～100之間 int currentValue = (Integer) animator.getAnimatedValue(); Log.d(TAG, "current value: " + currentValue); // 獲得當前進度占整個動畫過程的比例，浮點型，0～1之間 float fraction = animator.getAnimatedFraction(); // 直接調用整型估值器，通過比例計算出寬度，然后再設給Button target.getLayoutParams().width = mEvaluator.evaluate(fraction, start, end); target.requestLayout(); } }); valueAnimator.setDuration(5000).start(); } @Override public void onClick(View v) { if (v == mButton) { performAnimate(mButton, mButton.getWidth(), 500); } } 上述代碼的效果圖和采用ViewWrapper是一樣的，請參看圖7-3。關于這個ValueAnimator要再說一下，拿上面的例子來說，它會在5000ms內將一個數從1變到100，然后動畫的每一幀會回調onAnimationUpdate方法。在這個方法里，我們可以獲取當前的值（1～100）和當前值所占的比例，我們可以計算出Button現在的寬度應該是多少。比如時間過了一半，當前值是50，比例為0.5，假設Button的起始寬度是100px，最終寬度是500px，那么Button增加的寬度也應該占總增加寬度的一半，總增加寬度是500-100=400，所以這個時候Button應該增加的寬度是400×0.5=200，那么當前Button的寬度應該為初始寬度 + 增加寬度（100+200=300）。上述計算過程很簡單，其實它就是整型估值器IntEvaluator的內部實現，所以我們不用自己寫了，直接用吧。