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

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

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:

 

 

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:

 

 

 

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:

 

 

 

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.