Android Properties Animation

<span id="Label3"></p>Original Address: http://www.2cto.com/kf/201401/270169.html problem:<p><p>Add an animation to the button to increase the width of the button from the current width to 500px.</p></p><p><p>You may say, this is very simple, with the gradient animation can be done, we can try, can you write it? Soon you will suddenly realize that the gradient animation does not support the animation of the width at all, yes, The gradient animation only supports four types: pan (Translate), rotation (Rotate), scale, opacity (Alpha). Of course you zoom in x (scaleX) to make the button zoom in the X direction, it looks as if the width is increased, not really, just the button is magnified, and because only in the X direction is magnified, this time the button background and the above text is stretched, It's even possible that the button will go beyond the Screen. Below is</p></p><p><p></p></p><p><p>The above effect is obviously very poor, and it is not really the width of the animation, but fortunately we also have property animation, we use property animation to try</p></p><p><p>See Demo</p></p><pre class="brush:java;"><pre class="brush:java;"> private void Performanimate () { objectanimator.ofint (mbutton, width, $). setduration (). start (); @Override public void OnClick (View v) { if (v = = Mbutton) { performanimate (); } }</pre></pre><p><p>The above code to run a bit found no effect, in fact, no effect is right, if you casually pass a property in the past, light is not animated, heavy program directly Crash.</p></p>The following analysis of the principle of property animation:<p><p>Property animations require an animated object to provide a get and set method for the property, which, based on the familiar initial and final values that you pass, invokes the set method multiple times with the effect of the animation, and each time the value passed to the Set method is different, which is exactly over time, The values passed are getting closer to the final Value. To summarize, you animate the property xxx of object, and if you want the animation to take effect, you need to satisfy two conditions at the same time:</p></p><p><p><strong>1. Object must provide the Setxxx method, if the animation does not pass the initial value, then also provide the GetXXX method, because the system to get the initial value of the XXX property (if This is not satisfied, the program directly crash)</strong></p></p><p><p><strong>2. Object setxxx changes to attribute xxx must be able to be reflected in some way, such as what will bring about UI changes (if This is not satisfied, the animation is ineffective but not crash)</strong></p></p><p><p>The above conditions are indispensable</p></p><p><p>So why do we animate the Width property of the button without effect? This is because the button interior provides the getwidth and SetWidth methods, but this setwidth method is not to change the size of the view, it is a new method TextView added, view is not the SetWidth method, Because the button inherits the textview, the button also has the SetWidth Method. Here's a look at the source code for this getwidth and SetWidth method:</p></p><pre class="brush:java;"><pre class="brush:java;">/** * makes the TextView exactly this many pixels wide. * You could does 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) {mmaxwi DTH = 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; }</pre></pre><p><p>From the source can be seen, getwidth really is to get the width of the view, and SetWidth is TextView and its subclasses of the exclusive method, it does not set the width of the view, but set the maximum width of the textview and the minimum width, The width of this and TextView is not a thing, specifically, the width of the textview corresponds to the Android:layout_width attribute in the xml, and TextView has an attribute android:width, this android: The Width property corresponds to the SetWidth method of the Textview. ok, I admit that this paragraph of my description is a bit confusing, but the thing is really this way, and I have not found this android:width attribute has any important use, feel like useless, here do not delve into, or deviate from the Subject. In short, TextView and button setwidth and getwidth do not do the same thing, through the setwidth can not change the width of the control, so the width of the property animation has no effect, corresponding to the property animation of the two conditions, The reason the animation does not take effect in this example is that condition 1 does not meet the condition 2.</p></p><p><p>In response to these questions, Google tells us there are 3 solutions:</p></p><p><p><strong>1. Add the Get and set methods to your object, if you have permission</strong></p></p><p><p><strong>2. Wrapping the original object with a class, indirectly providing it with get and set methods</strong></p></p><p><p><strong>3. Use valueanimator, monitor the animation process, the implementation of their own property changes</strong></p></p><p><p>It looks a little abstract, but don't worry, i'll introduce you here.</p></p>Animate any property<p><p>For the three solutions presented above, here is a detailed description:</p></p>Add the Get and set methods to your object, if you have Permission.<p><p>The meaning of this is very good understanding, if you have permission, plus get and set will be done, but many times we do not have the authority to do so, such as the question at the beginning of this article, you can not add a compliant setwidth method, because this is the Android Implemented within the SDK. This method is the simplest, but often not feasible, and there is no more analysis of it.</p></p>Wraps the original object with a class, providing it with the get and set methods indirectly<p><p>This is a very useful solution, is my favorite, because it is very convenient to use, but also very good understanding, the following will be a concrete example to introduce it</p></p><pre class="brush:java;"><pre class="brush:java;"> private void Performanimate () { viewwrapper wrapper = new Viewwrapper (mbutton); Objectanimator.ofint (wrapper, width,). setduration (). 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 (); } }</pre></pre><p><p>In the above code 5s to increase the width of the button to 500px, in order to achieve this effect, we provide the Viewwrapper class specifically for packaging view, specifically to this example is the wrapper button, and then we are familiar with the width of viewwrapper to do animation, And it modifies the width of the target within the SetWidth method, and target is actually the button that we wrapped, so an indirect familiarity with the animation is Done. The code above also applies to other properties of an Object. See the effect below</p></p><p><p></p></p><p><p>ok, the effect achieved, the real realization of the width of the Animation.</p></p>Using valueanimator, listening to the animation process, the implementation of their own property changes<p><p>The first thing to say is that Valueanimator,valueanimator itself does not work for any object, that is, using it directly without any animated Effect. It can animate a value, and then we can listen to its animation process and modify the property values of our objects during the animation, which is equivalent to animating our Objects. Still don't understand? That's okay, Here's an Example.</p></p><pre class="brush:java;"> private void Performanimate (final View target, final int start, final int end) {valueanimator valueanimator = Valueanimator.ofint (1, 100); Valueanimator.addupdatelistener (new animatorupdatelistener () {///holds A Intevaluator object for easy valuation when used Priv Ate intevaluator mevaluator = new Intevaluator (); @Override public void Onanimationupdate (valueanimator Animator) {//get The current Animation's progress value, int, 1-100 int currentvalue = (Integer) Animator.getanimatedvalue (); LOG.D (TAG, Current value: + currentvalue); Calculates the current progress in proportion to the entire animation process, floating-point, 0-1 between float fraction = currentvalue/100f; I'm Lazy here, But there's something out there.//direct call to the integer estimator is calculated by scaling the width, and then to button target.getlayoutparams (). width = meval Uator.evaluate (fraction, start, end); Target.requestlayout (); } }); Valueanimator.setduration (). Start (); } @Override Public VOID OnClick (View v) {if (v = = Mbutton) {performanimate (mbutton, mbutton.getwidth (), 500); } }</pre><p><p>The animation of the above code is the same as using viewwrapper, please See. About this valueanimator I'm going to say again, for example, it will change a number from 1 to 100 within 5000ms, then each frame of the animation will callback the Onanimationupdate method, in which we can get the current value (1-100), Depending on the current value (current value/100), we can calculate what the Button's width should be now, such as half the time, the current value is 50, The ratio is 0.5, assuming that the starting width of the button is 100px, the final width is 500px, then the width of the button increase should also account for half of the total increase in width, the total increase width is 500-100=400, so this time the button should increase the width 400*0.5= 200, the width of the current button should be the initial width + increase width (100+200=300). The above calculation process is very simple, in fact, it is the integral type Estimator Intevaluator internal implementation, All we do not have to write, directly use it.</p></p>Write it in the Back.<p><p>So far, the analysis of this article is basically complete, there are a few points I would like to say Again.</p></p><p><p>1.View animations (gradient Animations) are limited, and you can try using property animations</p></p><p><p>2. In order to use attribute animation on various Android versions, you need to adopt nineoldandroids, which is GitHub open source project, jar package and source code can be online to, if not the jar package, I can send everyone</p></p><p><p>3. Complex animations are a reasonable combination of simple animations, plus the method described in this article, you can animate any property, meaning you can almost make any animation</p></p><p><p>4. The Interpolator (interpolator) and estimator (typeevaluator) in the property animation is important, It is an important means to achieve the Non-uniform animation, you should try to understand it, it is best that you can also customize them</p></p><p><p>5. If you can read my Animation series blog and understand it, I think you are absolutely proficient in animation, and I do not think that an interviewer can be animated to ask you</p></p><p><p>Android Properties Animation</p></p></span>