Android属性动画深入分析：让你成为动画牛人(转载)

本是古典何须时尚 2022-09-20 09:08 147阅读 0赞

[转载出处:http://blog.csdn.net/singwhatiwanna/article/details/17841165][http_blog.csdn.net_singwhatiwanna_article_details_17841165]

## 前言 ##

感谢你阅读本文，我坚信读完本文肯定不会让你失望的。想要做动画牛人？想要精通动画？那么本文所讲的内容都是你必须要掌握的。关于动画，我已经写了两篇博文，但是还是没有将动画描述全面，于是我写了本文，另外，我后面还会再写一篇属性动画的源码分析，通过这四篇博文，你将真正地成为动画牛人。

**Android动画系列：**

[android动画简介][android]

[Android动画进阶—使用开源动画库nineoldandroids][Android_nineoldandroids]

[Android属性动画深入分析：让你成为动画牛人][http_blog.csdn.net_singwhatiwanna_article_details_17841165]

[Android源码分析—属性动画的工作原理][Android]

## 我为什么要写这篇博文？ ##

是分享精神，我对动画从了解到熟悉是经历了一个过程，而这一个过程是要花费时间的，也许是几天，也许是几个小时，总之没有至少若干小时的时间投入，你是无法熟悉动画的全部的。我花了大量时间来弄懂动画的整个逻辑，深知其中的辛苦，所以，我不想大家再像我这样，我想大家能够更快地熟悉并精通动画。通过本文，你将会深入了解Android动画并且从此没有动画再能难得了你。确切来说本文是深入分析属性动画，因为View动画和帧动画的功能有限也比较简单，没有太多值得分析的东西。

## 开篇 ##

像设计模式一样，我们也提出一个问题来引出我们的内容。

#### 问题： ####

给Button加一个动画，让这个Button的宽度从当前宽度增加到500px。

也许你会说，这很简单，用渐变动画就可以搞定，我们可以来试试，你能写出来吗？很快你就会恍然大悟，原来渐变动画根本不支持对宽度进行动画啊，没错，渐变动画只支持四种类型：平移（Translate）、旋转（Rotate）、缩放（Scale）、不透明度（Alpha）。当然你用x方向缩放（scaleX）可以让Button在x方向放大，看起来好像是宽度增加了，实际上不是，只是Button被放大了而已，而且由于只在x方向被放大，这个时候Button的背景以及上面的文本都被拉伸了，甚至有可能Button会超出屏幕。下面是效果图

![SouthEast][]

上述效果显然是很差的，而且也不是真正地对宽度做动画，不过，所幸我们还有属性动画，我们用属性动画试试

看demo

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **private** **void** performAnimate() \{  
2.      ObjectAnimator.ofInt(mButton, "width", 500).setDuration(5000).start();  
3.  \}  
4.    
5.  @Override  
6.  **public** **void** onClick(View v) \{  
7.      **if** (v == mButton) \{  
8.          performAnimate();  
9.      \}  
10. \}

上述代码运行一下发现没效果，其实没效果是对的，如果你随便传递一个属性过去，轻则没动画效果，重则程序直接Crash。

#### 下面分析下属性动画的原理： ####

属性动画要求动画作用的对象提供该属性的get和set方法，属性动画根据你传递的该熟悉的初始值和最终值，以动画的效果多次去调用set方法，每次传递给set方法的值都不一样，确切来说是随着时间的推移，所传递的值越来越接近最终值。总结一下，你对object的属性xxx做动画，如果想让动画生效，要同时满足两个条件：

**1. object必须要提供setXxx方法，如果动画的时候没有传递初始值，那么还要提供getXxx方法，因为系统要去拿xxx属性的初始值（如果这条不满足，程序直接Crash）**

**2. object的setXxx对属性xxx所做的改变必须能够通过某种方法反映出来，比如会带来ui的改变啥的（如果这条不满足，动画无效果但不会Crash）**

以上条件缺一不可

那么为什么我们对Button的width属性做动画没有效果？这是因为Button内部虽然提供了getWidth和setWidth方法，但是这个setWidth方法并不是改变视图的大小，它是TextView新添加的方法，View是没有这个setWidth方法的，由于Button继承了TextView，所以Button也就有了setWidth方法。下面看一下这个getWidth和setWidth方法的源码：

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  /\*\* 
2.   \* Makes the TextView exactly this many pixels wide. 
3.   \* You could do the same thing by specifying this number in the 
4.   \* LayoutParams. 
5.   \* 
6.   \* @see \#setMaxWidth(int) 
7.   \* @see \#setMinWidth(int) 
8.   \* @see \#getMinWidth() 
9.   \* @see \#getMaxWidth() 
10.  \* 
11.  \* @attr ref android.R.styleable\#TextView\_width 
12.  \*/  
13. @android.view.RemotableViewMethod  
14. **public** **void** setWidth(**int** pixels) \{  
15.     mMaxWidth = mMinWidth = pixels;  
16.     mMaxWidthMode = mMinWidthMode = PIXELS;  
17.   
18.     requestLayout();  
19.     invalidate();  
20. \}  
21.   
22. /\*\* 
23.  \* Return the width of the your view. 
24.  \* 
25.  \* @return The width of your view, in pixels. 
26.  \*/  
27. @ViewDebug.ExportedProperty(category = "layout")  
28. **public** **final** **int** getWidth() \{  
29.     **return** mRight - mLeft;  
30. \}

从源码可以看出，getWidth的确是获取View的宽度的，而setWidth是TextView和其子类的专属方法，它的作用不是设置View的宽度，而是设置TextView的最大宽度和最小宽度的，这个和TextView的宽度不是一个东西，具体来说，TextView的宽度对应Xml中的android:layout\_width属性，而TextView还有一个属性android:width，这个android:width属性就对应了TextView的setWidth方法。好吧，我承认我的这段描述有点混乱，但事情的确是这个样子的，而且我目前还没发现这个android:width属性有啥重要的用途，感觉好像没用似的，这里就不深究了，不然就偏离主题了。总之，TextView和Button的setWidth和getWidth干的不是同一件事情，通过setWidth无法改变控件的宽度，所以对width做属性动画没有效果，对应于属性动画的两个条件来说，本例中动画不生效的原因是只满足了条件1未满足条件2。

针对上述问题，Google告诉我们有3中解决方法：

**1. 给你的对象加上get和set方法，如果你有权限的话**

**2. 用一个类来包装原始对象，间接为其提供get和set方法**

**3. 采用ValueAnimator，监听动画过程，自己实现属性的改变**

看起来有点抽象，不过不用担心，下面我会一一介绍。

## 对任何属性做动画 ##

针对上面提出的三种解决方法，这里会给出具体的介绍：

#### 给你的对象加上get和set方法，如果你有权限的话 ####

这个的意思很好理解，如果你有权限的话，加上get和set就搞定了，但是很多时候我们没权限去这么做，比如本文开头所提到的问题，你无法给Button加上一个合乎要求的setWidth方法，因为这是Android SDK内部实现的。这个方法最简单，但是往往是不可行的，这里就不对其进行更多分析了。

#### 用一个类来包装原始对象，间接为其提供get和set方法 ####

这是一个很有用的解决方法，是我最喜欢用的，因为用起来很方便，也很好理解，下面将通过一个具体的例子来介绍它

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **private** **void** performAnimate() \{  
2.      ViewWrapper wrapper = **new** ViewWrapper(mButton);  
3.      ObjectAnimator.ofInt(wrapper, "width", 500).setDuration(5000).start();  
4.  \}  
5.    
6.  @Override  
7.  **public** **void** onClick(View v) \{  
8.      **if** (v == mButton) \{  
9.          performAnimate();  
10.     \}  
11. \}  
12.   
13. **private** **static** **class** ViewWrapper \{  
14.     **private** View mTarget;  
15.   
16.     **public** ViewWrapper(View target) \{  
17.         mTarget = target;  
18.     \}  
19.   
20.     **public** **int** getWidth() \{  
21.         **return** mTarget.getLayoutParams().width;  
22.     \}  
23.   
24.     **public** **void** setWidth(**int** width) \{  
25.         mTarget.getLayoutParams().width = width;  
26.         mTarget.requestLayout();  
27.     \}  
28. \}

上述代码5s内让Button的宽度增加到500px，为了达到这个效果，我们提供了ViewWrapper类专门用于包装View，具体到本例是包装Button，然后我们对ViewWrapper的width熟悉做动画，并且在setWidth方法中修改其内部的target的宽度，而target实际上就是我们包装的Button，这样一个间接属性动画就搞定了。上述代码同样适用于一个对象的其他属性。下面看效果

![SouthEast 1][]

ok，效果达到了，真正实现了对宽度做动画。

#### 采用ValueAnimator，监听动画过程，自己实现属性的改变 ####

首先说说啥是ValueAnimator，ValueAnimator本身不作用于任何对象，也就是说直接使用它没有任何动画效果。它可以对一个值做动画，然后我们可以监听其动画过程，在动画过程中修改我们的对象的属性值，这样也就相当于我们的对象做了动画。还是不太明白？没关系，下面用例子说明

**\[java\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **private** **void** performAnimate(**final** View target, **final** **int** start, **final** **int** end) \{  
2.      ValueAnimator valueAnimator = ValueAnimator.ofInt(1, 100);  
3.    
4.      valueAnimator.addUpdateListener(**new** AnimatorUpdateListener() \{  
5.    
6.          //持有一个IntEvaluator对象，方便下面估值的时候使用  
7.          **private** IntEvaluator mEvaluator = **new** IntEvaluator();  
8.    
9.          @Override  
10.         **public** **void** onAnimationUpdate(ValueAnimator animator) \{  
11.             //获得当前动画的进度值，整型，1-100之间  
12.             **int** currentValue = (Integer)animator.getAnimatedValue();  
13.             Log.d(TAG, "current value: " + currentValue);  
14.   
15.             //计算当前进度占整个动画过程的比例，浮点型，0-1之间  
16.             **float** fraction = currentValue / 100f;  
17.   
18.             //这里我偷懒了，不过有现成的干吗不用呢  
19.             //直接调用整型估值器通过比例计算出宽度，然后再设给Button  
20.             target.getLayoutParams().width = mEvaluator.evaluate(fraction, start, end);  
21.             target.requestLayout();  
22.         \}  
23.     \});  
24.   
25.     valueAnimator.setDuration(5000).start();  
26. \}  
27.   
28. @Override  
29. **public** **void** onClick(View v) \{  
30.     **if** (v == mButton) \{  
31.         performAnimate(mButton, mButton.getWidth(), 500);  
32.     \}  
33. \}

上述代码的动画效果图和采用ViewWrapper是一样的，请参看上图。关于这个ValueAnimator我要再说一下，拿上例来说，它会在5000ms内将一个数从1变到100，然后动画的每一帧会回调onAnimationUpdate方法，在这个方法里，我们可以获取当前的值（1-100），根据当前值所占的比例（当前值/100），我们可以计算出Button现在的宽度应该是多少，比如时间过了一半，当前值是50，比例为0.5，假设Button的起始宽度是100px，最终宽度是500px，那么Button增加的宽度也应该占总增加宽度的一半，总增加宽度是500-100=400，所以这个时候Button应该增加宽度400\*0.5=200，那么当前Button的宽度应该为初始宽度+ 增加宽度（100+200=300）。上述计算过程很简单，其实它就是整型估值器IntEvaluator的内部实现，所有我们不用自己写了，直接用吧。

## 写在后面的话 ##

到此为止，本文的分析基本完成，有几点是我想再说一下的。

1.View动画（渐变动画）的功能是有限的，大家可以尝试使用属性动画

2.为了在各种安卓版本上使用属性动画，你需要采用nineoldandroids，它是GitHub开源项目，jar包和源码都可以在网上下到，如果下不到jar包，我可以发给大家

3.再复杂的动画都是简单动画的合理组合，再加上本文介绍的方法，可以对任何属性作用动画效果，也就是说你几乎可以做出任何动画

4.属性动画中的插值器（Interpolator）和估值器（TypeEvaluator）很重要，它是实现非匀速动画的重要手段，你应该试着搞懂它，最好你还能够自定义它们

5.如果你能把我这个动画系列博文都看一遍并且理解它，我认为你对动画绝对算得上精通，而且我不认为有面试官能够在动画上问倒你

[http_blog.csdn.net_singwhatiwanna_article_details_17841165]: http://blog.csdn.net/singwhatiwanna/article/details/17841165
[android]: http://blog.csdn.net/singwhatiwanna/article/details/9270275
[Android_nineoldandroids]: http://blog.csdn.net/singwhatiwanna/article/details/17639987
[Android]: http://blog.csdn.net/singwhatiwanna/article/details/17853275
[SouthEast]: /images/20220828/f0f1d9386678450fa73bd999685c38fe.png
[view plain]: http://blog.csdn.net/singwhatiwanna/article/details/17841165#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/142261
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/142261/fork
[SouthEast 1]: /images/20220828/a1daaaa2dfdd41b89adae5050d77e692.png