Motion tween animations and property animations for Android development

Speaking of animation, in fact, no stranger, in the use of an app in order to optimize the user experience, more or less, will add animation.

Wirelessly animations are divided into two main categories: tweened Animation and property animation. This article Boven detailed summary of the two major animation, I hope this blog post for your study and life to be helpful.

* * tweened Animation * *

tweened animations are divided into four categories: Pan animation, rotate animation, scale animation, and gradient animation. These kinds of animation usage are similar, but the object parameters are different here I unified display. The following are:

The implementation code is simple:

       Btn1.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (View v) {                        Pan animation translateanimation translate=new translateanimation (animation.relative_to_self,300,                ANIMATION.RELATIVE_TO_SELF,300);                Translate.setduration (3000);                Translate.setfillafter (TRUE);            Img.startanimation (translate);        }        });                Btn2.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (View v) {                        Rotate animation rotateanimation rotate=new rotateanimation (0,360, animation.relative_to_self,0.5f,                animation.relative_to_self,0.5f);                Rotate.setfillafter (TRUE);                Rotate.setduration (3000);            Img.startanimation (rotate);        }        }); Btn3.setonclicklistener (New View.onclicklistener () {@Override Public void OnClick (View v) {//Zoom animation scaleanimation scale=new scaleanimation (0,2,0,2,animatio                n.relative_to_self,0.5f, animation.relative_to_self,0.5f);                Scale.setduration (3000);            Img.startanimation (scale);        }        });                Btn4.setonclicklistener (New View.onclicklistener () {@Override public void OnClick (View v) {                Gradient animation alphaanimation Alpha =new alphaanimation (0,1);                Alpha.setduration (3000);            Img.startanimation (Alpha); }        });

Summarize the following:

Alphaanimation: Gradient animation, 0.0f fully transparent, 1.0f fully displayed.

Rotateanimation: Rotate the animation. The starting angle, the end angle, the relative value, the scale of the horizontal axis, the relative value, the scale of the ordinate. (The end angle is positive clockwise, negative number is counterclockwise)

Scaleanimation: Proportional animation, x position proportional start, x position proportional end, Y position proportional start, y position proportional end, x anchor, x parameter, y anchor, y parameter

Setduration: Sets the animation playback time. Setfillafter (true): The interface stays at the end of the animation state instead of initializing the state. In addition, we can combine these animation effects to achieve the combined animation. : The code is easy to understand:

 Animationset animationset=new Animationset (false); Translateanimation translate=new translateanimation (animation.relative_to_self,300, Animation.RELAT                IVE_TO_SELF,300);                Translate.setduration (3000);                Translate.setfillafter (TRUE);                Animationset.addanimation (translate); Rotateanimation rotate=new rotateanimation (0,360, animation.relative_to_self,0.5f, Animation.RELATI                ve_to_self,0.5f);                Rotate.setfillafter (TRUE);                Rotate.setduration (3000);                Animationset.addanimation (rotate); Scaleanimation scale=new scaleanimation (0,2,0,2,animation.relative_to_self,0.5f, Animation.RELATIVE                _to_self,0.5f);                Scale.setduration (3000);                Animationset.addanimation (scale);                Alphaanimation Alpha =new alphaanimation (0,1);                Alpha.setduration (3000); AnimAtionset.addanimation (Alpha); Img.startanimation (Animationset);

Animationset through the Addanimation () method, you can combine animations to achieve more animation effects.

* * Property Animation * *

The early riser animation does not change the view's parameters, and the view changes back to its original appearance when it is refreshed. So, after Android 3.0, Google launched a property animation.

The essence of property animation is through, for example: Translationx,translationy,scalex,scaley,rotationx,rotationy, and so on, these new attributes, which record the value of the view

So that the view animation can be saved, after the refresh will not disappear.

Here is a simple example of changing the zoom value on X by using a property animation:

Next is the implementation code:

  Btn6.setonclicklistener (new  View.onclicklistener () {            @Override            publicvoid  OnClick (View v) {                objectanimator objectanimator= Objectanimator.offloat (img, "ScaleX", 0.5f);                Objectanimator.setduration (+);                Objectanimator.setstartdelay (+);                Objectanimator.start ();            }        });

If this is achieved, there are a lot of drawbacks. Because property animations can only be used after the 3.0 version, the version is too low to be used. And, to implement an attribute animation, parameters are too cumbersome. So, here is the recommended

Use the Open source framework:nineoldandroids.

If you are using Android Studio in Gradle, add: dependencies {
Compile ' com.nineoldandroids:library:2.4.0 '
}

Using this open source framework, you can not only use property animations in a lower version, but also make it easier and easier to implement.

   Btn6.setonclicklistener (new  View.onclicklistener () {            @Override            publicvoid  OnClick (View v) {                ///nineoldandroid A class implementation                 Viewpropertyanimator                        . Animate (IMG)
                        . ScaleX (0. 5f)                        . Setinterpolator (new  overshootinterpolator ())//More than one point back                        . Setduration (+)                        . Start ();            }        });

A simple example:

What, is it more beautiful?

The code is also very simple:

  viewpropertyanimator.                        Animate (IMG)                        . Translationy (.                        setinterpolator (  New  Bounceinterpolator ())//Elastic drop                        . Setduration ()                        . Start ();

You can also do this:

Code:

      viewpropertyanimator                        . Animate (IMG)                        . Translationx (+)                        . Setinterpolator (  New Cycleinterpolator (6))// back and forth Jitter                        . setduration                        . Start ();

OK, about the animation is introduced here, if you know the basic method, how cool animation can be combined by their own, if this blog post what is wrong to write the place, welcome message, discuss with each other, finally, hope

You have helped your students and your life through this blog post.

 

Motion tween animations and property animations for Android development