高級UI特效之仿3D翻轉切換效果

高仿3D翻轉切換效果

效果圖：

高仿3D旋轉效果.gif

前言

做爲Android程序員，或者是想要去模仿一些酷炫的效果，或者是爲了實現視覺的變態需求，或者是壓抑不住心裏的創造欲想要炫技，咱們不可避免地須要作各類動畫。

實現邏輯

• 自定義Animation實現本身邏輯
• 控制Matrix的旋轉動畫

控件動畫介紹

其實控件動畫也是佈局動畫的一種，能夠看作是自定義的動畫實現，佈局動畫在XML中定義OPhone已經實現的幾個動畫效果（AlphaAnimation、TranslateAnimation、ScaleAnimation、RotateAnimation）而控件動畫就是在代碼中繼承android.view.animation.Animation類來實現自定義效果。

控件動畫實現

經過重寫Animation的 applyTransformation (float interpolatedTime, Transformation t)函數來實現自定義動畫效果，另一般也會實現 initialize (int width, int height, int parentWidth, int parentHeight)函數，這是一個回調函數告訴Animation目標View的大小參數，在這裏能夠初始化一些相關的參數，例如設置動畫持續時間、設置Interpolator、設置動畫的參考點等。

@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();
        if (mReverse) {
            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
        } else {
            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
        }
        camera.rotateY(degrees);
        camera.getMatrix(matrix);
        camera.restore();

        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
    }複製代碼

如何設置一個新的三維旋轉的容器視圖

/**
     * 設置一個新的三維旋轉的容器視圖。只翻通常，而後設置新的現實內容
     * 
     * @param zheng
     *            一個判斷機制 若是爲true 則向右翻轉，若是false則向左翻轉
     * @param fragment
     *            傳入的片斷
     * @param start
     *            起始位置
     * @param end
     *            結束位置
     */
    public void applyRotation(final boolean zheng, final Fragment fragment,
            final float start, final float end) {
        // Find the center of the container
        final float centerX = framelayout.getWidth() / 2.0f;
        final float centerY = framelayout.getHeight() / 2.0f;

        // Create a new 3D rotation with the supplied parameter
        // The animation listener is used to trigger the next animation
        final Util_Rotate3DAnimation rotation = new Util_Rotate3DAnimation(
                start, end, centerX, centerY, 310.0f, true);
        rotation.setDuration(500);
        rotation.setFillAfter(true);
        rotation.setInterpolator(new AccelerateInterpolator());
        rotation.setAnimationListener(new DisplayNextView(zheng, fragment));// 添加監聽執行現實內容的切換
        framelayout.startAnimation(rotation);// 執行上半場翻轉動畫
    }複製代碼

利用fragment界面切換如何調用

button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                ((MainActivity) getActivity()).applyRotation(false,
                        new Fragment_First(), 0, -90);
            }
        });複製代碼

項目地址：

github.com/androidstar…

更多文章

高級UI特效仿直播點贊效果—一個優美炫酷的點贊動畫

一個實現錄音和播放的小案例

相信本身，沒有作不到的，只有想不到的

若是你以爲此文對您有所幫助，歡迎加入微信公衆號：終端研發部

技術+職場