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

ydlg1864 8年前發布 | 18K 次閱讀 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")
@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);
    }
}

當翻轉一半透明度由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的背景換成純色。

本文由用戶 ydlg1864 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1455783035245.html

Android開發移動開發

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

相關經驗

相關資訊

相關文檔

目錄