图片3D翻转效果

Android手机上有众多的炫酷的设计风格,动画必然是APP的一大亮点,所以一个好看的动画效果的实现一直是很多程序员所追求的,所以今天我就给大家分享一个不错的3D翻转动画,让你的APP炫酷起来.
首先对于3D我们并不陌生我们都知道X轴Y轴,但是对于3D效果来说我们还需要一个Z轴,所以我们直接上代码,看一看我们这个工具类.

import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.Transformation;

public class Rotate3d extends Animation{  
 private final float mFromDegrees;  
    private final float mToDegrees;  
    private final float mCenterX;  
    private final float mCenterY;  
    private final float mDepthZ;  
    private final boolean mReverse;  
    private Camera mCamera;  
    public Rotate3d(float fromDegrees, float toDegrees,  
            float centerX, float centerY, float depthZ, boolean reverse) {  
        mFromDegrees = fromDegrees;  
        mToDegrees = toDegrees;  
        mCenterX = centerX;  
        mCenterY = centerY;  
        mDepthZ = depthZ;  
        mReverse = reverse;  
    }  
    @Override  
    public void initialize(int width, int height, int parentWidth, int parentHeight) {  
        super.initialize(width, height, parentWidth, parentHeight);  
        mCamera = new Camera();  
    }  
    @Override  
    protected void applyTransformation(float interpolatedTime, Transformation t) {  
        final float fromDegrees = mFromDegrees;  
        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);  
        final float centerX = mCenterX;  
        final float centerY = mCenterY;  
        final Camera camera = mCamera;  
        final Matrix matrix = t.getMatrix();  
        // 将当前的摄像头位置保存下来，以便变换进行完成后恢复成原位，  
        camera.save();  
        // camera.translate，这个方法接受3个参数，分别是x,y,z三个轴的偏移量，我们这里只将z轴进行了偏移，  
        if (mReverse) {  
            // z的偏移会越来越大。这就会形成这样一个效果，view从近到远  
            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);  
        } else {  
            // z的偏移会越来越小。这就会形成这样一个效果，我们的View从一个很远的地方向我们移过来，越来越近，最终移到了我们的窗口上面～  
            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));  
        }  

        // 是给我们的View加上旋转效果，在移动的过程中，视图还会移Y轴为中心进行旋转。  
        camera.rotateY(degrees);  
        // 是给我们的View加上旋转效果，在移动的过程中，视图还会移X轴为中心进行旋转。  
        // camera.rotateX(degrees);  

        // 这个是将我们刚才定义的一系列变换应用到变换矩阵上面，调用完这句之后，我们就可以将camera的位置恢复了，以便下一次再使用。  
        camera.getMatrix(matrix);  
        // camera位置恢复  
        camera.restore();  

        // 以View的中心点为旋转中心,如果不加这两句，就是以（0,0）点为旋转中心  
        matrix.preTranslate(-centerX, -centerY);  
        matrix.postTranslate(centerX, centerY);  
    }  
}  

这个工具类很重要,算是我们3D翻转效果的核心.

接下来让我们看看具体的动画实现吧

private void applyRotation(int position, float start, float end, ViewGroup vg, ImageView imageView, int IMAGE) {
        //获取FrameLayout的x、y值。这样图片在翻转的时候会以这个x、y值为中心翻转。
        //这就是为什么我要用FrameLayout的原因。如果直接使用的是父容器RelativeLayout将会以RelativeLayout的中心为轴心
        //翻转。由于我的图片不是处于RelativeLayout的中心，翻转时就会有差错.效果可以看看下面的图片。
        //当然，有时候你就想要那样的效果。你也可以在自行调整centerX和centerY的值来达到你想要的效果
        final float centerX = vg.getWidth() / 2.0f;
        final float centerY = vg.getHeight() / 2.0f;
        final Rotate3d rotation =
                new Rotate3d(start, end, centerX, centerY, 310.0f, true);
        rotation.setDuration(1000);  //可设置翻转的时间，以ms为单位
        rotation.setFillAfter(true);
        rotation.setInterpolator(new AccelerateInterpolator());
        rotation.setAnimationListener(new DisplayNextView(imageView, IMAGE, vg));
        vg.startAnimation(rotation);  //开始翻转前90度
    }

private final class DisplayNextView implements Animation.AnimationListener {
        private ImageView imageView;
        private int IMAGE;
        private ViewGroup vg;

        public DisplayNextView(ImageView imageView, int IMAGE, ViewGroup vg) {
            this.IMAGE = IMAGE;
            this.vg = vg;
            this.imageView = imageView;
        }

        public void onAnimationStart(Animation animation) {
        }

        public void onAnimationEnd(Animation animation) {
            //前90度翻转完成后，根据图片的状态翻转剩下的90度

                imageView.setImageResource(IMAGE);
                vg.post(new SwapViews(1, vg));

        }

        public void onAnimationRepeat(Animation animation) {
        }
    }

让图片自动翻转

    private final class SwapViews implements Runnable {
        private final int mdirection;
        private ViewGroup vg;


        //这里用一个方向变量来指明剩下的90度应该怎么翻转。
        public SwapViews(int direction, ViewGroup vg) {
            mdirection = direction;
            this.vg = vg;
        }

        public void run() {
            final float centerX = vg.getWidth() / 2.0f;
            final float centerY = vg.getHeight() / 2.0f;
            Rotate3d rotation;
            if (mdirection == 0) {
                rotation = new Rotate3d(90, 0, centerX, centerY, 310.0f, false);
                which = true;//待翻转完成后，修改图片状态
            } else {
                rotation = new Rotate3d(-90, 0, centerX, centerY, 310.0f, false);
                which = false;
            }
            rotation.setDuration(1000);
            rotation.setFillAfter(true);
            rotation.setInterpolator(new DecelerateInterpolator());
            vg.startAnimation(rotation);  //开始翻转余下的90度
        }
    }

 /**
     * 开启子线程自动翻转
     *
     * @param what
     */
    public void roll(final int what) {
        new Thread(new Runnable() {
            @Override
            public void run() {
                for (int i = 0; i < 0xABCL; i++) {
                    handler.sendEmptyMessage(what);
                    try {
                        Thread.sleep(2 * rand() * 1000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }

/**
 * 图片翻转动画
 */
    private void overturn() {
        handler = new Handler(new Handler.Callback() {
            @Override
            public boolean handleMessage(Message message) {
                if (message.what == 201) {
                    if (!which) {
                        applyRotation(0, 0, -90, vp1, img1, 0);//左旋90度
                    } else {
                        applyRotation(0, 0, 90, vp1, img1, IMAGE1);//右旋90度
                    }
                } else if (message.what == 202) {
                    if (!which) {
                        applyRotation(0, 0, 90, vp2, img2, 4);//右旋90度
                    } else {
                        applyRotation(0, 0, -90, vp2, img2, IMAGE2);//左旋90度
                    }
                }
                 return false;
            }
        });
    }

这样我们的图片翻转功能就可以实现了,把IMAGE设置成自己想使用的图片就OK了.