android 上下翻页效果（FlipView）

需求需要，做一个分数翻页的效果，在网上找了很久，参照一个github的项目，自己写了个demo，现在记录下思路

参考项目地址：https://github.com/emilsjolander/android-FlipView

实现步骤：

1.由Scroller类实现动画，

mScroller.startScroll(startX,startY,dx,dy,duration);

通过移动距离和移动时间，由getCurrY()获取当前距离

2.翻页效果的绘制分为三部分（由第一步计算到的距离来不断刷新页面）

-->绘制控件的上半部分 

canvas.clipRect(mTooRect);

-->绘制控件的下半部分 

canvas.clipRect(mBottomRect);

-->绘制中间翻页部分 

camera.rotateX()，沿X轴翻转

canvas.clipRect(mTooRect ormBottomRect)，根据当前翻转的度数（0~180度），决定画布裁剪部分

camera.getMatrix(mMatrix)，设置matrix矩阵的值，对中间页进行变形，达到翻页的视觉效果

positionMatrix()

canvas.concat(mMatrix);

drawChild()，绘制控件

关键代码：

------------------

 @Override

    protectedvoid dispatchDraw(Canvas canvas) {

        super.dispatchDraw(canvas);

//如果Scroller开始滚动，则开始绘制页面

        if(!mScroller.isFinished() && mScroller.computeScrollOffset()){

            drawTopHalf(canvas);

            drawBottomHalf(canvas);

            drawFlipHalf(canvas);

            postInvalidate();

        }else {//绘制完成之后，将需要显示的页面绘制出来

            if(isFlipping){

                showViews(canvas);

            }

            if(mScroller.isFinished() && !mScroller.computeScrollOffset()){

                isFlipping = false;

            }

}

    }

    /**显示需要显示的数字

     * @param canvas*/

    privatevoid showViews(Canvas canvas) {

        String current = mVisibleTextView.getText().toString();

        String past = mInvisibleTextView.getText().toString();

        mVisibleTextView.setText(past);

        mInvisibleTextView.setText(current);

        //防止切换抖动

        drawChild(canvas,mVisibleTextView,0);

    }

    /**画下半部分*/

    privatevoid drawBottomHalf(Canvas canvas) {

        canvas.save();

        canvas.clipRect(mBottomRect);

        View drawView = isUp ? mInvisibleTextView : mVisibleTextView;

        drawChild(canvas,drawView,0);

        canvas.restore();

    }

    /**画上半部分*/

    privatevoid drawTopHalf(Canvas canvas) {

        canvas.save();

        canvas.clipRect(mTopRect);

        View drawView = isUp ? mVisibleTextView : mInvisibleTextView;

        drawChild(canvas,drawView,0);

        canvas.restore();

    }

    /**画翻页部分*/

    privatevoid drawFlipHalf(Canvas canvas) {

        canvas.save();

        mCamera.save();

        View view = null;

        float deg = getDeg();

        if(deg >90){

            canvas.clipRect(isUp ? mTopRect : mBottomRect);

            mCamera.rotateX(isUp ? deg - 180 : -(deg -180));

            view = mInvisibleTextView;

        }else {

            canvas.clipRect(isUp ? mBottomRect : mTopRect);

            mCamera.rotateX(isUp ? deg : -deg);

            view = mVisibleTextView ;

        }

        mCamera.getMatrix(mMatrix);

        positionMatrix();

        canvas.concat(mMatrix);

        if(view !=null){

            drawChild(canvas,view,0);

        }

        drawFlippingShadeShine(canvas);

        mCamera.restore();

        canvas.restore();

    }

    privatefloat getDeg() {

        return mScroller.getCurrY() *1.0f / layoutHeight *
180;

    }

   
/**绘制翻页时的阳面和阴面*/

    privatevoid drawFlippingShadeShine(Canvas canvas) {

        finalfloat degreesFlipped = getDeg();

        Log.d(TAG,"deg: " + degreesFlipped);

        if (degreesFlipped <90) {

            finalint alpha = getAlpha(degreesFlipped);

            Log.d(TAG,"小于90度时的透明度------------------->
" + alpha);

            mShinePaint.setAlpha(alpha);

            mShadePaint.setAlpha(alpha);

            canvas.drawRect(isUp ? mBottomRect : mTopRect, isUp ? mShinePaint : mShadePaint);

        } else {

            finalint alpha = getAlpha(Math.abs(degreesFlipped -180));

            Log.d(TAG,"大于90度时的透明度------------->
" + alpha);

            mShadePaint.setAlpha(alpha);

            mShinePaint.setAlpha(alpha);

            canvas.drawRect(isUp ? mTopRect : mBottomRect, isUp ? mShadePaint : mShinePaint);

        }

    }

demo下载地址：

http://download.csdn.net/detail/beikin/9565370