Android UI模擬器啟動界面動畫效果的簡單實現

關鍵點：

1.自定義控件。

2.Shader渲染的使用。 

上圖，見代碼。

main.xml

[xhtml]

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical" android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" android:layout_gravity="center_vertical">  
5.     <com.example.android.MaskedTextView  
6.         android:id="@+id/text"  
7.         android:layout_width="fill_parent"  
8.         android:layout_height="fill_parent"  
9.         android:gravity="center_vertical"  
10.     />  
11. </LinearLayout>  

Activity.class

[java]

1. package com.example.android;  
2. import android.app.Activity;  
3. import android.os.Bundle;  
4. public class MaskedTextViewActivity extends Activity {  
5.     public void onCreate(Bundle savedInstanceState) {  
6.         super.onCreate(savedInstanceState);  
7.         setContentView(R.layout.main);  
8.         ((MaskedTextView) findViewById(R.id.text)).setStart(true);  
9.     }  
10. }  

自定義View

[java]

1. package com.example.android;  
2. import android.content.Context;  
3. import android.graphics.Canvas;  
4. import android.graphics.Color;  
5. import android.graphics.LinearGradient;  
6. import android.graphics.Matrix;  
7. import android.graphics.Paint;  
8. import android.graphics.Shader;  
9. import android.util.AttributeSet;  
10. import android.view.View;  
11. /** 此代碼源於David_Zhang，由Sodino注釋，歡迎挑錯。 */  
12. public class MaskedTextView extends View {  
13.     private Paint txtPaint;  
14.     /** 陰影渲染在X軸上的位移。 */  
15.     private float moveX = 0;  
16.     private boolean start = false;  
17.     /** 每次渲染的位移像素值。 */  
18.     private static final int MOVE_SPEEND = 1;  
19.     private void init() {  
20.         txtPaint = new Paint();  
21.         txtPaint.setColor(Color.GRAY);  
22.         txtPaint.setAntiAlias(true);  
23.         txtPaint.setTextSize(26);  
24.         // 創建一個線性梯度著色器   
25.         // 參數中colors的數組長度與positions的數組長度相對應<br/>   
26.         // 本例中初始化後相應的純色位置如下(與平鋪模式有關)：<br/>   
27.         // Black: 200 * 0<br/>   
28.         // YELLOW: 200 * 0.3<br/>   
29.         // DKGRAY: 200 * 0.6<br/>   
30.         // WHITE: 200 * 1<br/>   
31.         // 最後一個參數為：著色器的顏色平鋪模式。共有三種選擇：<br/>   
32.         // 1.MIRROR: 顏色平鋪從0→colors[i]→0，邊緣過渡。   
33.         // 2.REPEAT: 顏色平鋪從0→colors[i]，邊緣無過渡。   
34.         // 3.CLAMP:與邊框著色有關。   
35.         Shader shader = new LinearGradient(0, 0, 200, 0, new int[] {  
36.                 Color.BLACK, Color.YELLOW, Color.DKGRAY, Color.WHITE },  
37.                 new float[] { 0, 0.3f, 0.6f, 1 }, Shader.TileMode.MIRROR);  
38.         txtPaint.setShader(shader);  
39.     }  
40.     /** 由xml實例化的UI組件在VM中是調用本構造函數生成新實例的。 */  
41.     public MaskedTextView(Context context, AttributeSet attrs) {  
42.         super(context, attrs);  
43.         init();  
44.     }  
45.     public void setStart(boolean start) {  
46.         this.start = start;  
47.         // 由UI主線程調用，開始渲染本UI組件。   
48.         invalidate();  
49.     }  
50.     protected void onDraw(Canvas canvas) {  
51.         moveX += MOVE_SPEEND;  
52.         Matrix matrix = new Matrix();  
53.         if (start) {  
54.             // 陰影渲染沿x軸向右移動dx像素,沿y軸向下移動0像素。   
55.             // 渲染的位移形成動畫。   
56.             matrix.setTranslate(moveX, 0);  
57.             invalidate();  
58.         } else {  
59.             matrix.setTranslate(0, 0);  
60.         }  
61.         txtPaint.getShader().setLocalMatrix(matrix);  
62.         canvas.drawText(getContext().getString(R.string.msg), 0, 25, txtPaint);  
63.     }  
64. }