[Android]實現數位3d翻轉效果

標籤：android   動畫   

傳統的旋轉動畫方式如：

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android">     <rotate         android:fromDegrees="0"        android:toDegrees="359"        android:duration="500"        android:repeatCount="-1"        android:pivotX="50%"        android:pivotY="50%" /> </set>

只能實現在一個2維平面內旋轉，要實現3D只能使用opengl或者簡化了3D動畫實現的camera類。

api demo中的Rotate3DAnimation?示範了如何使用camera來實現3D翻轉動畫，本文講解如何將這種動畫運用到數位翻轉中。

數字翻轉最常見的是在日曆應用中，當日期改變，數字將翻轉到另外一個值，和一般的翻轉不同，這種翻轉有以下幾個特徵：

1.數字增加或者減少翻轉的方向不同，一般增加是順時針，減少是逆時針。

2.數位翻轉需要同時改變數位值：當翻轉進度過半時需要更新其顯示內容。

3.這點不重要。我們需要一個能美化數位字型。

4.為了使翻轉更生動需要在翻轉過程中按照一定的規律的改變透明度。

下面幾張圖示範了4-5的翻轉過程：

實現:

我們仿照api demo中的Rotate3DAnimation 寫了一個Rotate3DNumberAnimation：

        Rotate3DNumberAnimation的建構函式需有三個參數，分別說明動畫組件的中心點位置及旋轉方向。?
        Rotate3DNumberAnimation.initialize()將初始化動畫組件及其父容器的寬高；通常亦可進行另外的初始化工作，本例中用於執行對camera進行執行個體化賦值。?
        Rotate3DNumberAnimation.applyTransformation()第一個參數為動畫的進度時間值，取值範圍為[0.0f,1.0f]，第二個參數Transformation記錄著動畫某一幀中變形的未經處理資料。該方法在動畫的每一幀顯示過程中都會被調用。?
        ?在翻轉過程中，為了避免在動畫下半部分時映像為鏡面效果影響數位閱讀，應將翻轉角度做180度的減法。代碼為Rotate3DNumberAnimation.applyTransformation()中的：

if (overHalf) {    // 翻轉過半的情況下，為保證數字仍為可讀的文字而非鏡面效果的文字，需翻轉180度。    degree = degree - 180;}

動畫翻轉到一半後，應更新數字內容。為了得知翻轉進度，於Rotate3DNumberAnimation中設計一內部靜態介面類"InterpolatedTimeListener"，該介面只有一個方法"interpolatedTime(float interpolatedTime)"可以將動畫進度傳遞給監聽發起者。除了在翻轉一半後更新數字內容外，我們還需根據這個Listener改變數位透明度。

@SuppressLint("NewApi")@Overridepublic void interpolatedTime(float interpolatedTime) {    // 監聽到翻轉進度過半時，更新txtNumber顯示內容。    if (enableRefresh && interpolatedTime > 0.5f) {        txtNumber.setText(Integer.toString(number));        Log.d("ANDROID_LAB", "setNumber:" + number);        enableRefresh = false;    }    //改變透明度    if(interpolatedTime > 0.5f) {        txtNumber.setAlpha((interpolatedTime -0.5f) * 2);    } else {        txtNumber.setAlpha(1-interpolatedTime * 2);    }}

當翻轉一半透明度由1變0，然後在完成後續的翻轉過程中透明度由0變1。我們使用了@SuppressLint("NewApi")是因為view.setAlpha方法不支援api 11以下，如果你想相容2.x的裝置，請用nineoldandroids庫，並用ViewHelper.setAlpha()替代。

為了美化數字，我們將字型 HelveticaNeueLTPro-ThEx.otf放到Assets/fonts目錄下。設定字型的代碼如下：

Typeface localTypeface = Typeface.createFromAsset(getAssets(), "fonts/HelveticaNeueLTPro-ThEx.otf");txtNumber.setTypeface(localTypeface);

同時為字型加上陰影製作效果：

<style name="text_shadow_style">     <item name="android:shadowColor">#80000000</item>     <item name="android:shadowDx">1.0</item>     <item name="android:shadowDy">1.0</item>     <item name="android:shadowRadius">0.5</item> </style>

下面是java全部代碼：
MainActivity

package com.example.rotatedemo;                                                                                                                                                                             import com.example.rotatedemo.Rotate3DNumberAnimation.InterpolatedTimeListener;import android.annotation.SuppressLint;import android.app.Activity;import android.graphics.Typeface;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.TextView;/** * @author www.jcodecraeer.com * */public class MainActivity extends Activity implements OnClickListener, InterpolatedTimeListener {    private Button btnIncrease, btnDecrease;    private TextView txtNumber;    private int number;    /** TextNumber是否允許顯示最新的數字。 */    private boolean enableRefresh;    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        btnIncrease = (Button) findViewById(R.id.btnIncrease);        btnDecrease = (Button) findViewById(R.id.btnDecrease);        txtNumber = (TextView) findViewById(R.id.txtNumber);        btnIncrease.setOnClickListener(this);        btnDecrease.setOnClickListener(this);        number = 3;        Typeface localTypeface = Typeface.createFromAsset(getAssets(), "fonts/HelveticaNeueLTPro-ThEx.otf");        txtNumber.setTypeface(localTypeface);                                   txtNumber.setText(Integer.toString(number));    }    public void onClick(View v) {        enableRefresh = true;        Rotate3DNumberAnimation rotateAnim = null;        float cX = txtNumber.getWidth() / 2.0f;        float cY = txtNumber.getHeight() / 2.0f;        if (v == btnDecrease) {            number--;            rotateAnim = new Rotate3DNumberAnimation(cX, cY, Rotate3DNumberAnimation.ROTATE_DECREASE);        } else if (v == btnIncrease) {            number++;            rotateAnim = new Rotate3DNumberAnimation(cX, cY, Rotate3DNumberAnimation.ROTATE_INCREASE);        }        if (rotateAnim != null) {            rotateAnim.setInterpolatedTimeListener(this);            rotateAnim.setFillAfter(true);                                                                                                                                                                                         txtNumber.startAnimation(rotateAnim);        }    }    @SuppressLint("NewApi")    @Override    public void interpolatedTime(float interpolatedTime) {        // 監聽到翻轉進度過半時，更新txtNumber顯示內容。        if (enableRefresh && interpolatedTime > 0.5f) {            txtNumber.setText(Integer.toString(number));            Log.d("ANDROID_LAB", "setNumber:" + number);            enableRefresh = false;        }        //改變透明度        if(interpolatedTime > 0.5f) {            txtNumber.setAlpha((interpolatedTime -0.5f) * 2);        } else {            txtNumber.setAlpha(1-interpolatedTime * 2);        }    }}

Rotate3DNumberAnimation

package com.example.rotatedemo;import android.graphics.Camera;import android.graphics.Matrix;import android.view.animation.Animation;import android.view.animation.Transformation;/** * @author www.jcodecraeer.com */public class Rotate3DNumberAnimation extends Animation {    /** 值為true時可明確查看動畫的旋轉方向。 */    public static final boolean DEBUG = false;    /** 沿Y軸正方向看，數值減1時動畫逆時針旋轉。 */    public static final boolean ROTATE_DECREASE = true;    /** 沿Y軸正方向看，數值減1時動畫順時針旋轉。 */    public static final boolean ROTATE_INCREASE = false;    /** Z軸上最大深度。 */    public static final float DEPTH_Z = 0.0f;    /** 動畫顯示時間長度。 */    public static final long DURATION = 500;    /** 圖片翻轉類型。 */    private final boolean type;    private final float centerX;    private final float centerY;    private Camera camera;    /** 用於監聽動畫進度。當值過半時需更新txtNumber的內容。 */    private InterpolatedTimeListener listener;    public Rotate3DNumberAnimation(float cX, float cY, boolean type) {        centerX = cX;        centerY = cY;        this.type = type;        setDuration(DURATION);    }    public void initialize(int width, int height, int parentWidth, int parentHeight) {        // 在建構函式之後、getTransformation()之前調用本方法。        super.initialize(width, height, parentWidth, parentHeight);        camera = new Camera();    }    public void setInterpolatedTimeListener(InterpolatedTimeListener listener) {        this.listener = listener;    }    protected void applyTransformation(float interpolatedTime, Transformation transformation) {        // interpolatedTime:動畫進度值，範圍為[0.0f,1.0f]        if (listener != null) {            listener.interpolatedTime(interpolatedTime);        }        float from = 0.0f, to = 0.0f;        if (type == ROTATE_DECREASE) {            from = 0.0f;            to = 180.0f;        } else if (type == ROTATE_INCREASE) {            from = 360.0f;            to = 180.0f;        }        float degree = from + (to - from) * interpolatedTime;        boolean overHalf = (interpolatedTime > 0.5f);        if (overHalf) {            // 翻轉過半的情況下，為保證數字仍為可讀的文字而非鏡面效果的文字，需翻轉180度。            degree = degree - 180;        }        // float depth = 0.0f;        float depth = (0.5f - Math.abs(interpolatedTime - 0.5f)) * DEPTH_Z;        final Matrix matrix = transformation.getMatrix();        camera.save();        camera.translate(0.0f, 0.0f, depth);        camera.rotateY(degree);        camera.getMatrix(matrix);        camera.restore();        if (DEBUG) {            if (overHalf) {                matrix.preTranslate(-centerX * 2, -centerY);                matrix.postTranslate(centerX * 2, centerY);            }        } else {            //確保圖片的翻轉過程一直處於組件的中心點位置            matrix.preTranslate(-centerX, -centerY);            matrix.postTranslate(centerX, centerY);        }    }    /** 動畫進度監聽器。 */    public static interface InterpolatedTimeListener {        public void interpolatedTime(float interpolatedTime);    }}

項目地址：http://jcodecraeer.com/a/opensource/2014/1012/1755.html

註：背景圖片比較大，如果在低端機上比較卡，可以將activity的背景換成純色。

[Android]實現數位3d翻轉效果