Android UI开发第四十三篇——使用Property Animation实现墨迹天气3.0引导界面及动画实现

前面写过《墨迹天气3.0引导界面及动画实现》，里面完美实现了动画效果，那一篇文章使用的View Animation，这一篇文章使用的Property Animation实现。Property Animation是Android3.0以后新增的动画库。

这篇文章的源码以及效果在github。

    实现墨迹天气向上滑动的viewpager使用的开源库ViewPager-Android。ViewPager-Android开源库设置app:orientation定义滑动方向。

    墨迹天气引导界面共有4个视图，先看一下：（这里引入的图片都是实现后的，截图都是静态图，运行程序看动画效果）。

               

图一                                                                                          图二

   

               

图三                                                                                        图四

    墨迹天气的引导界面使用的无非是移动、渐变、缩放、转动或者其中几个的组合。我们介绍其中的部分实现。

1、缩放动画

    首先是图一的“极低耗电”使用了一个缩放效果，使用Property Animation实现如下：

    xml动画文件：

   

[html] view plaincopyprint?

1. <?xmlversion="1.0"encoding="utf-8"?> 
2. <set xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:ordering="together"> 
4.  
5.     <objectAnimator 
6.         android:duration="1000" 
7.         android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
8.         android:propertyName="scaleX" 
9.         android:valueFrom="1.0" 
10.         android:valueTo="1.1" 
11.         android:valueType="floatType"> 
12.     </objectAnimator> 
13.     <objectAnimator 
14.         android:duration="1000" 
15.         android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
16.         android:propertyName="scaleY" 
17.         android:valueFrom="1.0" 
18.         android:valueTo="1.1" 
19.         android:valueType="floatType"> 
20.     </objectAnimator> 
21.  
22. </set> 

<?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使用：

[java] view plaincopyprint?

1. animation1=(AnimatorSet)AnimatorInflater.loadAnimator(PropertyAnimActivity.this,   
2.                 R.animator.tutorail_rotate);  
3.         LinearInterpolator lin = new LinearInterpolator(); 
4.         animation1.setInterpolator(lin); 
5.         t1_icon2.setVisibility(View.VISIBLE); 
6.          
7.         animation1.setTarget(t1_icon2);   
8.         animation1.start();  

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、移动渐变组合动画

    图一中下面的箭头使用了移动渐变组合动画，实现如下：

    xml文件：

[html] view plaincopyprint?

1. <?xmlversion="1.0"encoding="utf-8"?> 
2. <set xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:ordering="together"> 
4.  
5.     <!-- 
6.     可以包含<objectAnimator>,<valueAnimator>,<set>项 
7.     属性：android:ordering=["together" | "sequentially"]，子集执行顺序 
8.     sequentially    Play animations in this set sequentially 
9.     together (default)  Play animations in this set at the same time. 
10.     --> 
11.  
12.     <set 
13.         xmlns:android="http://schemas.android.com/apk/res/android" 
14.         android:ordering="together"> 
15.         <objectAnimator 
16.             android:duration="1000" 
17.             android:propertyName="translationX" 
18.             android:repeatCount="infinite" 
19.             android:repeatMode="reverse" 
20.             android:valueFrom="0" 
21.             android:valueTo="0" 
22.             android:valueType="floatType"> 
23.         </objectAnimator> 
24.         <objectAnimator 
25.             android:duration="1000" 
26.             android:propertyName="translationY" 
27.             android:repeatCount="infinite" 
28.             android:repeatMode="reverse" 
29.             android:valueFrom="-15" 
30.             android:valueTo="20" 
31.             android:valueType="floatType"> 
32.         </objectAnimator> 
33.     </set> 
34.  
35.     <objectAnimator 
36.         android:duration="1000" 
37.         android:propertyName="alpha" 
38.         android:repeatCount="infinite" 
39.         android:valueFrom="1.0" 
40.         android:valueTo="0.3" 
41.         android:valueType="floatType"> 
42.     </objectAnimator> 
43.     <!-- 
44.    objectAnimator： 
45.      
46.         android:propertyName 
47.             对view可以设置一下值: 
48.                translationX and translationY:  
49.                    These properties control where the View is located  
50.                    as a delta from its left and top coordinates which  
51.                    are set by its layout container. 
52.                rotation, rotationX, and rotationY:  
53.                    These properties control the rotation  
54.                    in 2D (rotation property) and 3D around the pivot point. 
55.                scaleX and scaleY:  
56.                    These properties control the 2D scaling of a View around  
57.                    its pivot point. 
58.                pivotX and pivotY:  
59.                    These properties control the location of the pivot point,  
60.                    around which the rotation and scaling transforms occur.  
61.                    By default, the pivot point is located at the center of  
62.                    the object. 
63.                x and y:  
64.                    These are simple utility properties to describe  
65.                    the final location of the View in its container,  
66.                    as a sum of the left and top values and translationX  
67.                    and translationY values. 
68.                alpha:  
69.                    Represents the alpha transparency on the View.  
70.                    This value is 1 (opaque) by default, with a value of 0  
71.                    representing full transparency (not visible). 
72.                     
73.                还可以设置"backgroundColor"等值 
74.                     
75.         android:valueTo 
76.             float, int, or color. Required. The value where the animated property ends.  
77.             Colors are represented as six digit hexadecimal numbers (for example, #333333). 
78.          
79.         android:valueFrom 
80.             float, int, or color. The value where the animated property starts. If not specified,  
81.             the animation starts at the value obtained by the property's get method.  
82.             Colors are represented as six digit hexadecimal numbers (for example, #333333). 
83.          
84.         android:duration 
85.             int. The time in milliseconds of the animation. 300 milliseconds is the default. 
86.          
87.         android:startOffset 
88.             int. The amount of milliseconds the animation delays after start() is called.   
89.          
90.         android:repeatCount：重复次数 
91.             说明： 
92.             infinite：循环执行， 
93.             具体正整数表示循环次数 
94.              
95.         android:repeatMode：重复模式， 
96.             说明： 
97.                 restart：重新从头开始执行 
98.                 reverse：反方向执行 
99.                  
100.         android:valueType 
101.            Keyword. Do not specify this attribute if the value is a color.  
102.            The animation framework automatically handles color values 
103.             
104.            intType: Specifies that the animated values are integers 
105.            floatType (default): Specifies that the animated values are floats 
106.     --> 
107.  
108. </set> 

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:ordering="together" >    <!--    可以包含<objectAnimator>, <valueAnimator>,<set>项    属性：android:ordering=["together" | "sequentially"]，子集执行顺序    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"            android: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            对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 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 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).                                  还可以设置"backgroundColor"等值                           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：重复次数            说明：            infinite：循环执行，            具体正整数表示循环次数                    android:repeatMode：重复模式，            说明：                restart：重新从头开始执行                reverse：反方向执行                        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>

    Java调用动画资源和前面是一样的，不做过多说明。

   

3、旋转缩放组合动画

    图1中间使用了旋转缩放组合动画，，实现如下：

   

[html] view plaincopyprint?

1. <?xmlversion="1.0"encoding="utf-8"?> 
2. <set xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:ordering="together"> 
4.  
5.     <set 
6.         xmlns:android="http://schemas.android.com/apk/res/android" 
7.         android:ordering="together"> 
8.         <objectAnimator 
9.             android:duration="800" 
10.             android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
11.             android:propertyName="scaleX" 
12.             android:valueFrom="0.0" 
13.             android:valueTo="1.2" 
14.             android:valueType="floatType"> 
15.         </objectAnimator> 
16.         <objectAnimator 
17.             android:duration="800" 
18.             android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
19.             android:propertyName="scaleY" 
20.             android:valueFrom="0.0" 
21.             android:valueTo="1.2" 
22.             android:valueType="floatType"> 
23.         </objectAnimator> 
24.     </set> 
25.  
26.     <objectAnimator 
27.         android:duration="3000" 
28.         android:propertyName="rotation" 
29.         android:repeatCount="-1" 
30.         android:valueFrom="0.0" 
31.         android:valueTo="359.0" 
32.         android:valueType="floatType"> 
33.     </objectAnimator> 
34.    
35. </set> 

<?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>

Java调用动画资源和前面是一样的，不做过多说明。

4、平移动画

     图三更多的使用了平移动画，因为要计算位置，没有使用xml资源文件，Java实现：

[java] view plaincopyprint?

1. transAnimationX2=ObjectAnimator.ofFloat(t3_icon2, "translationX", fx1, tx1); 
2.         transAnimationX2.setDuration(800); 
3.         transAnimationX2.setRepeatCount(Animation.INFINITE);// Animation.INFINITE 
4.         transAnimationX2.setRepeatMode(Animation.RESTART); 
5.         transAnimationX2.setInterpolator(new LinearInterpolator()); 
6.          
7.         transAnimationY2=ObjectAnimator.ofFloat(t3_icon2, "translationY", fy1, ty1); 
8.         transAnimationY2.setDuration(800); 
9.         transAnimationY2.setRepeatCount(Animation.INFINITE);// Animation.INFINITE 
10.         transAnimationY2.setRepeatMode(Animation.RESTART); 
11.         transAnimationY2.setInterpolator(new LinearInterpolator()); 
12.          
13.  
14.          
15.         PropertyValuesHolder pvhX3 = PropertyValuesHolder.ofFloat("translationX", fx2, tx2); 
16.         PropertyValuesHolder pvhY3 = PropertyValuesHolder.ofFloat("translationY", fy2, ty2); 
17.         transAnimation3=ObjectAnimator.ofPropertyValuesHolder(t3_icon3, pvhX3, pvhY3); 
18.         transAnimation3.setDuration(1200); 
19.         transAnimation3.setRepeatCount(Animation.INFINITE); 
20.         transAnimation3.setRepeatMode(Animation.RESTART); 
21.         transAnimation3.setInterpolator((new LinearInterpolator())); 
22.  
23.          
24.         PropertyValuesHolder pvhX4 = PropertyValuesHolder.ofFloat("translationX", fx3, tx3); 
25.         PropertyValuesHolder pvhY4 = PropertyValuesHolder.ofFloat("translationY", fy3, ty3); 
26.         transAnimation4=ObjectAnimator.ofPropertyValuesHolder(t3_icon4, pvhX4, pvhY4); 
27.         transAnimation4.setDuration(1200); 
28.         transAnimation4.setRepeatCount(Animation.INFINITE); 
29.         transAnimation4.setRepeatMode(Animation.RESTART); 
30.         transAnimation4.setInterpolator((new LinearInterpolator())); 
31.  
32.  
33.  
34.         PropertyValuesHolder pvhX5 = PropertyValuesHolder.ofFloat("translationX", fx4, tx4); 
35.         PropertyValuesHolder pvhY5 = PropertyValuesHolder.ofFloat("translationY", fy4, ty4); 
36.         transAnimation5=ObjectAnimator.ofPropertyValuesHolder(t3_icon5, pvhX5, pvhY5); 
37.         transAnimation5.setDuration(800); 
38.         transAnimation5.setRepeatCount(Animation.INFINITE); 
39.         transAnimation5.setRepeatMode(Animation.RESTART); 
40.         transAnimation5.setInterpolator((new LinearInterpolator())); 
41.          
42.         flag3=true; 
43.          
44.         // 延迟1秒 
45.         new Handler() {              
46.             @Override 
47.             public void dispatchMessage(Message msg) { 
48.                 // TODO Auto-generated method stub 
49.                 if(flag3) 
50.                     super.dispatchMessage(msg); 
51.             } 
52.  
53.             public void handleMessage(android.os.Message msg) { 
54.                 if (msg.what == 1) { 
55.                      
56.                     t3_icon2.setVisibility(View.VISIBLE); 
57.                     t3_icon3.setVisibility(View.VISIBLE); 
58.                     t3_icon4.setVisibility(View.VISIBLE); 
59.                     t3_icon5.setVisibility(View.VISIBLE); 
60.  
61.                     transAnimationX2.start(); 
62.                     transAnimationY2.start(); 
63.                      
64.                     transAnimation3.start(); 
65.                     transAnimation4.start(); 
66.                     transAnimation5.start(); 
67.                      
68.                     t3_icon6_animationDrawable.start(); 
69.  
70.                 } 
71.             }; 
72.         }.sendEmptyMessageDelayed(1, 1000);// 1秒 

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;// 延迟1秒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秒

这个动画中更重要的是计算初始和结束位置：

[java] view plaincopyprint?

1. view3.getViewTreeObserver().addOnGlobalLayoutListener( 
2.             new OnGlobalLayoutListener() { 
3.  
4.                 @Override 
5.                 public void onGlobalLayout() { 
6.                     // TODO Auto-generated method stub 
7.                     int h1 = centerLayout.getTop(); 
8.                     int h2 = centerLayout.getBottom(); 
9.                     DensityUtil densityUtil = new DensityUtil( 
10.                             PropertyAnimActivity.this); 
11.                     int w = densityUtil.getScreenWidth(); 
12.  
13.                     fx1 = t3_icon2.getTop() + t3_icon2.getHeight(); 
14.                     fy1 = -t3_icon2.getTop() - t3_icon2.getHeight(); 
15.                     tx1 = -t3_icon2.getWidth() - t3_icon2.getLeft(); 
16.                     ty1 = t3_icon2.getTop() + t3_icon2.getLeft() 
17.                             + t3_icon2.getWidth(); 
18.  
19.                     fx2 = t3_icon3.getTop() + t3_icon3.getHeight(); 
20.                     fy2 = -t3_icon3.getTop() - t3_icon3.getHeight(); 
21.                     tx2 = -t3_icon3.getWidth() - t3_icon3.getLeft(); 
22.                     ty2 = t3_icon3.getTop() + t3_icon3.getLeft() 
23.                             + t3_icon3.getWidth(); 
24.  
25.                     fx3 = w - t3_icon4.getLeft(); 
26.                     fy3 = -(w - t3_icon4.getLeft()); 
27.                     tx3 = -(h2 - h1 - t3_icon4.getTop()); 
28.                     ty3 = h2 - h1 - t3_icon4.getTop(); 
29.  
30.                     fx4 = w - t3_icon5.getLeft(); 
31.                     fy4 = -(w - t3_icon5.getLeft()); 
32.                     tx4 = -(h2 - h1 - t3_icon5.getTop()); 
33.                     ty4 = h2 - h1 - t3_icon5.getTop(); 
34.                 } 
35.             }); 

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、循环插值器    

   第四页动画中重要的使用了CycleInterpolator（循环插值器）

[java] view plaincopyprint?

1. ObjectAnimator objAnim=ObjectAnimator.ofFloat(t4_icon1,"rotation", 0f, 10f); 
2.         CycleInterpolator interpolator = new CycleInterpolator(3.0f); 
3.         objAnim.setStartDelay(500); 
4.         objAnim.setDuration(3000); 
5.         objAnim.setRepeatCount(Animation.INFINITE);// Animation.INFINITE 
6.         objAnim.setInterpolator(interpolator); 
7.         t4_icon1.setPivotX(t4_icon1.getWidth()*0.47f); 
8.         t4_icon1.setPivotY(t4_icon1.getHeight()*0.05f); 
9.         objAnim.start();