Android UI development 43rd-use Property Animation to implement moji weather 3.0 guide interface and Animation, androidproperty

Android UI development 43rd-use Property Animation to implement moji weather 3.0 guide interface and Animation, androidproperty

Previously I wrote moji weather 3.0 guide interface and Animation implementation, which perfectly achieves the Animation effect. That article uses View Animation, and this article uses the Property Animation implementation. Property Animation is an Animation library added after Android3.0.

The source code and effects of this article are on github.

Viewpager-Android is an open-source library for ViewPager that slides upwards in moji.com. ViewPager-Android open source library sets app: orientation to define the sliding direction.

Moji.com has four Views on the weather guide interface. Let's take a look at the following: (all the images introduced here are implemented. They are static images. Run the program to see the animation effect ).

Figure 1 Figure 2

Figure 3 Figure 4

Moji weather's guiding interface is nothing more than a combination of movement, gradient, scaling, rotation, or a few. We will introduce some of the implementations.

1. Zoom Animation

First, "extremely low power consumption" in Figure 1 uses a scaling effect, and the following is implemented using Property Animation:

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="1000"        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="1000"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:propertyName="scaleY"        android:valueFrom="1.0"        android:valueTo="1.1"        android:valueType="floatType" >    </objectAnimator></set>

Java usage:

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);  animation1.start(); 

2. Mobile gradient combination Animation

The arrow in the lower part of Figure 1 uses a mobile gradient combination animation, which is implemented as follows:

Xml file:

<? Xml version = "1.0" encoding = "UTF-8"?> <Set xmlns: android = "http://schemas.android.com/apk/res/android" android: ordering = "together"> <! -- It can contain <objectAnimator>, <valueAnimator>, and <set> item attributes: android: ordering = ["together" | "sequentially"], subset execution sequence sequentiallyPlay animations in this set sequentially together (default) Play animations in this set at the same time. --> <set xmlns: android = "http://schemas.android.com/apk/res/android" android: ordering = "together"> <objectAnimator android: duration = "1000" android: propertyName = "translationX" andro Id: repeatCount = "infinite" android: repeatMode = "reverse" android: valueFrom = "0" android: valueTo = "0" android: valueType = "floatType"> </objectAnimator> <objectAnimator android: duration = "1000" android: propertyName = "translationY" android: repeatCount = "infinite" android: repeatMode = "reverse" android: valueFrom = "-15" android: valueTo = "20" android: valueType = "floatType"> </objectAnimator> </set> <objectAnimator Android: duration = "1000" android: propertyName = "alpha" android: repeatCount = "infinite" android: valueFrom = "1.0" android: valueTo = "0.3" android: valueType = "floatType"> </objectAnimator> <! -- ObjectAnimator: android: propertyName: You can set the following value for the view: translationX and translationY: these properties control where the View is located as a delta from its left and top coordinates which are set by its layout container. rotation, rotationX, and rotationY: These properties control the rotation in 2D (rotation property) and 3D around the entire point. scaleX and scaleY: These properties control the 2D scaling of a View around its endpoints point. specified Tx and specified TY: These properties control the location of the specified point, around which the rotation and scaling transforms occur. by default, the specified point is located at the center of the object. x and y: These are simple utility properties to describe the final location of the View in its container, as a sum of the left and top values and translationX and translationY values. alpha: Represents the alpha transparency on the View. this value is 1 (opaque) by default, with a value of 0 representing full transparency (not visible ). you can also set "backgroundColor" to android: valueTo float, int, or color. required. the value where the animated property ends. colors are 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 obtained by the property's get method. colors are represented as six digit hexadecimal numbers (for example, #333333 ). android: duration int. the time in milliseconds of the animation. 300 milliseconds is the default. android: startOffset int. the amount of milliseconds the animation delays after start () is called. android: repeatCount Description: infinite: cyclic execution. A positive integer indicates the number of cycles. android: repeatMode. Description: restart: Execute reverse again. Execute android: valueType Keyword. do not specify this attribute if the value is a color. the animation framework automatically handles color values intType: Specifies that the animated values are integers floatType (default): Specifies that the animated values are floats --> </set>

The calling of animation resources in Java is the same as that in the previous step.

3. rotating, scaling, and combination Animation

Figure 1 uses a rotation and scaling combination animation to achieve 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" >        <objectAnimator            android:duration="800"            android:interpolator="@android:anim/accelerate_decelerate_interpolator"            android:propertyName="scaleX"            android:valueFrom="0.0"            android:valueTo="1.2"            android:valueType="floatType" >        </objectAnimator>        <objectAnimator            android:duration="800"            android:interpolator="@android:anim/accelerate_decelerate_interpolator"            android:propertyName="scaleY"            android:valueFrom="0.0"            android:valueTo="1.2"            android:valueType="floatType" >        </objectAnimator>    </set>    <objectAnimator        android:duration="3000"        android:propertyName="rotation"        android:repeatCount="-1"        android:valueFrom="0.0"        android:valueTo="359.0"        android:valueType="floatType" >    </objectAnimator>  </set>

The calling of animation resources in Java is the same as that in the previous step.

4. Pan Animation

Figure 3 uses a translation animation. to calculate the position, the xml resource file is not used:

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; // 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 (); then ();}};}. sendEmptyMessageDelayed (1, 1000); // 1 second

In this animation, it is more important to calculate 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();DensityUtil 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.getLeft());tx4 = -(h2 - h1 - t3_icon5.getTop());ty4 = h2 - h1 - t3_icon5.getTop();}});

5. Cyclic Interpolation

CycleInterpolator is an important part of page 4 animation)

ObjectAnimator objAnim=ObjectAnimator.ofFloat(t4_icon1, "rotation", 0f, 10f);CycleInterpolator interpolator = new CycleInterpolator(3.0f);objAnim.setStartDelay(500);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 shows the animation effect of moji weather. For more information, see the code.

/*** @ Author Zhang xingye * http://blog.csdn.net/xyz_lmn* my Sina Weibo: @ Zhang xingye TBOW*/

Reference: http://developer.android.com/guide/topics/graphics/prop-animation.html#how