[Android]实现数字的3d翻转效果
ydlg1864
9年前
传统的旋转动画方式如：
<?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的背景换成纯色。