Android UI Development 43rd--using property animation to implement Ink Weather 3.0 boot interface and animation implementation

In front of the " Ink Weather 3.0 Guide interface and animation implementation ", the perfect realization of the animation effect, that an article using the View Animation, this article uses the property Animation implementation. The property animation is a new animation library after Android3.0.

This article has the source code as well as effects on GitHub.

Open Source Library for Viewpager using ink weather up-sliding Viewpager-android.

Viewpager-android Open Source Library Settings app:orientation define the slide direction.

Ink Weather Guide Interface together have 4 views, first look: (Here the pictures are implemented, are static diagrams, run the program to see the animation effect).

Figure A figure II

Figure three Figure Four

The Guide interface for ink weather uses nothing more than moving, fading, zooming, turning, or a combination of several.

We introduce some of the implementations.

1. Zoom animation

First, Tuyi's "very low power consumption" uses a scaling effect. Use the property animation implementation such as the following:

XML Animation file:

<?xml version= "1.0" encoding= "Utf-8"? ><set xmlns:android= "Http://schemas.android.com/apk/res/android"    android:ordering= "Together" >    <objectanimator        android:duration= "$"        android: Interpolator= "@android: Anim/accelerate_decelerate_interpolator"        android:propertyname= "ScaleX"        android: Valuefrom= "1.0"        android:valueto= "1.1"        android:valuetype= "Floattype" >    </objectAnimator>    <objectanimator        android:duration= "android:interpolator="        @android: Anim/accelerate_ Decelerate_interpolator "        android:propertyname=" ScaleY "        android:valuefrom=" 1.0 "        android:valueto= "1.1"        android:valuetype= "Floattype" >    </objectAnimator></set>

Java uses:

animation1= (Animatorset) animatorinflater.loadanimator (propertyanimactivity.this,      R.animator.tutorail_ Rotate); Linearinterpolator lin = new Linearinterpolator (); Animation1.setinterpolator (Lin); T1_icon2.setvisibility ( view.visible); Animation1.settarget (T1_icon2);  

2. Moving the gradient combination animation

The arrows below in figure one use the move gradient combo animation, for example, the following:

XML file:

<?
XML version= "1.0" encoding= "Utf-8"? ><set xmlns:android= "Http://schemas.android.com/apk/res/android" Android : ordering= "Together" > <!--can include <objectanimator>, <valueAnimator>,<set> Item properties: Android:order ing=["Together" | "Sequentially"], subset Run order Sequentiallyplay animations in this set sequentially together (default) Play animations in thi    s set at the same time. --<set xmlns:android= "http://schemas.android.com/apk/res/android" android:ordering= "Together"        ; <objectanimator android:duration= "" "Android:propertyname=" Translationx "Android:re Peatcount= "Infinite" android:repeatmode= "reverse" android:valuefrom= "0" android:valueto= " 0 "android:valuetype=" floattype "> </objectAnimator> <objectanimator Andro id:duration= "Android:propertyname=" Translationy "android:repeatcount="Infinite "android:repeatmode=" reverse "android:valuefrom=" -15 "android:valueto=" 20 " Android:valuetype= "Floattype" > </objectAnimator> </set> <objectanimator andro id:duration= "android:propertyname=" alpha "android:repeatcount=" Infinite "android:valuefrom=" 1.0 "Android:valueto=" 0.3 "android:valuetype=" Floattype "> </objectAnimator> <!--Objectani                    Mator:android:propertyName can set values for view: Translationx and Translationy: These properties control where the View is located as a delta from it left and top coordinates W               Hich is set by its layout container. Rotation, RotationX, and Rotationy:these properties control the rotation in 2D (rot               ation) and 3D around the pivot point. ScaleX and SCALey:these Properties control the 2D scaling of a View around its pivot point.                    Pivotx and Pivoty:these Properties control the location of the pivot point,                    Around which the rotation and scaling transforms occur.               By default, the pivot point was located at the center of the object. X and Y:these is simple utility properties to describe the final location of the V Iew in it container, as a sum of the left and top values and Translationx and trans               Lationy values.                    Alpha:represents the alpha transparency on the View.                                  This value was 1 (opaque) By default, with a value of 0 representing full transparency (not visible). Also able to set "BackgroundColor" equivalent to Android:Valueto float, int, or color. Required.             The value where the animated property ends.                Colors is represented as six digit hexadecimal numbers (for example, #333333). Android:valuefrom float, int, or color. The value where the animated property starts.             If not specified, the animation starts at the value of obtained by the property ' s get method.                Colors is represented as six digit hexadecimal numbers (for example, #333333). android:duration Int. The time in milliseconds of the animation.                Milliseconds is the default. Android:startoffset Int.                  The amount of milliseconds the animation delays after start () is called. Android:repeatcount: Repeat number: infinite: loop run, detailed positive integer indicates the number of cycles android:repeat Mode: Repeated modes, Description: Restart: Run reverse again from the beginning: Run Android in the opposite directionValueType Keyword.            Specify this attribute if the value is a color.  The animation framework automatically handles color values inttype:specifies that the animated values is integers floattype (default): Specifies that the animated values is floats--></set>

The Java invoke animation resource is the same as before, and does not make too much explanation.

3. Rotate and zoom the combined animation

Figure 1 uses the rotate-zoom combo animation in the middle, for example, the following:

<?xml version= "1.0" encoding= "Utf-8"?
><set xmlns:android= "Http://schemas.android.com/apk/res/android" android:ordering= "Together" > <set Xmlns:android= "Http://schemas.android.com/apk/res/android" android:ordering= "Together" > <objectani             Mator android:duration= "android:interpolator=" @android: Anim/accelerate_decelerate_interpolator " Android:propertyname= "ScaleX" android:valuefrom= "0.0" android:valueto= "1.2" a Ndroid:valuetype= "Floattype" > </objectAnimator> <objectanimator android:duration= "80 0 "android:interpolator=" @android: Anim/accelerate_decelerate_interpolator "android:propertyname=" SCA        LeY "android:valuefrom=" 0.0 "android:valueto=" 1.2 "android:valuetype=" Floattype "> </objectAnimator> </set> <objectanimator android:duration= "Android:propertyna" Me= "Rotation" andRoid:repeatcount= "-1" android:valuefrom= "0.0" android:valueto= "359.0" android:valuetype= "Floattype" &    Gt </objectAnimator> </set>

The Java invoke animation resource is the same as before, and does not make too much explanation.

4. Panning Animation

Figure three A lot of the other uses the translation animation, because to calculate the location, no XML resource file is used. Java implementations:

Transanimationx2=objectanimator.offloat (T3_icon2, "Translationx", FX1, TX1); transanimationx2.setduration (800); Transanimationx2.setrepeatcount (animation.infinite);//Animation.INFINITEtransAnimationX2.setRepeatMode ( Animation.restart); Transanimationx2.setinterpolator (new Linearinterpolator ()); transanimationy2= Objectanimator.offloat (T3_icon2, "Translationy", FY1, ty1); transanimationy2.setduration (800); Transanimationy2.setrepeatcount (animation.infinite);//Animation.INFINITEtransAnimationY2.setRepeatMode ( Animation.restart); Transanimationy2.setinterpolator (new Linearinterpolator ()); Propertyvaluesholder pvhX3 = propertyvaluesholder.offloat ("Translationx", FX2, TX2); Propertyvaluesholder pvhY3 = propertyvaluesholder.offloat ("Translationy", Fy2, ty2); transanimation3= Objectanimator.ofpropertyvaluesholder (T3_icon3, pvhX3, pvhY3); transanimation3.setduration (1200); Transanimation3.setrepeatcount (Animation.infinite); Transanimation3.setrepeatmode (Animation.RESTART); Transanimation3.setinterpolator ((New Linearinterpolator ())); Propertyvaluesholder pvhX4 = propertyvaluesholder.offloat ("Translationx", FX3, TX3); Propertyvaluesholder pvhY4 = propertyvaluesholder.offloat ("Translationy", Fy3, ty3); transanimation4= Objectanimator.ofpropertyvaluesholder (T3_icon4, pvhX4, pvhY4); transanimation4.setduration (1200); Transanimation4.setrepeatcount (Animation.infinite); Transanimation4.setrepeatmode (Animation.RESTART); Transanimation4.setinterpolator ((New Linearinterpolator ())); Propertyvaluesholder pvhX5 = propertyvaluesholder.offloat ("Translationx", FX4, tx4); Propertyvaluesholder pvhY5 = propertyvaluesholder.offloat ("Translationy", Fy4, Ty4); transanimation5= Objectanimator.ofpropertyvaluesholder (T3_icon5, pvhX5, pvhY5); transanimation5.setduration (800); Transanimation5.setrepeatcount (Animation.infinite); Transanimation5.setrepeatmode (Animation.RESTART); Transanimation5.setinterpolator ((New Linearinterpolator ())) flag3=true;//Delay 1 sec New Handler () {@Overridepublic void DispatchMessage (Message msg) {//TODO auto-Generated method stubif (FLAG3) super.dispatchmessage (msg); public void Handlemessage (Android.os.Message msg) {if (msg.what = = 1) {t3_icon2.setvisibility (view.visible); t3_ Icon3.setvisibility (view.visible); t3_icon4.setvisibility (view.visible); t3_icon5.setvisibility (View.VISIBLE); Transanimationx2.start (); Transanimationy2.start (); Transanimation3.start (); Transanimation4.start (); Transanimation5.start (); T3_icon6_animationdrawable.start ();}};}. Sendemptymessagedelayed (1, 1000);//1 seconds

More important in this animation is the calculation of the initial and end positions:

View3.getviewtreeobserver (). Addongloballayoutlistener (New Ongloballayoutlistener () {@Overridepublic void Ongloballayout () {//TODO auto-generated method Stubint h1 = Centerlayout.gettop (); int h2 = Centerlayout.getbottom ();D Ens Ityutil densityutil = new Densityutil (propertyanimactivity.this); int w = Densityutil.getscreenwidth (); fx1 = t3_ Icon2.gettop () + t3_icon2.getheight (); fy1 =-t3_icon2.gettop ()-t3_icon2.getheight (); tx1 =-t3_icon2.getwidth ()-t3_ Icon2.getleft (); ty1 = T3_icon2.gettop () + t3_icon2.getleft () + t3_icon2.getwidth (); fx2 = T3_icon3.gettop () + t3_ Icon3.getheight (); fy2 =-t3_icon3.gettop ()-t3_icon3.getheight (); tx2 =-t3_icon3.getwidth ()-T3_icon3.getleft (); ty2 = T3_icon3.gettop () + t3_icon3.getleft () + t3_icon3.getwidth (); fx3 = W-t3_icon4.getleft (); fy3 =-(W-t3_icon4.getleft ()); TX3 =-(H2-h1-t3_icon4.gettop ()); ty3 = H2-h1-t3_icon4.gettop (); fx4 = W-t3_icon5.getleft (); fy4 =-(W-T3_ICON5.G Etleft ()); tx4 =-(H2-h1-t3_icon5.gettop ()); Ty4 = H2-h1-t3_icon5. GetTop ();}}); 

5. Cyclic interpolation device

The fourth page of the animation in the important use of Cycleinterpolator (Loop interpolator)

Objectanimator objanim=objectanimator.offloat (T4_icon1, "rotation", 0f, 10f); Cycleinterpolator interpolator = new Cycleinterpolator (3.0f); Objanim.setstartdelay (+); Objanim.setduration (3000) ; Objanim.setrepeatcount (animation.infinite);//Animation.INFINITEobjAnim.setInterpolator (interpolator); t4_ Icon1.setpivotx (T4_icon1.getwidth () *0.47f); T4_icon1.setpivoty (T4_icon1.getheight () *0.05f); ObjAnim.start ();

The above basically realized the ink weather animation effect, a lot of other please refer to the code.

/*** @author Zhang Xingye* HTTP://BLOG.CSDN.NET/XYZ_LMN* My Sina Weibo: @ Zhang Xingye tbow */

References:Http://developer.android.com/guide/topics/graphics/prop-animation.html#how

Android UI Development 43rd--using property animation to implement Ink Weather 3.0 boot interface and animation implementation