翻书动画实现

最近利用空余时间实现了一下翻书的动画：

主要利用了3个方面的东西：

1：Canvas的Clip方法

2：设置Path路径，这其中包括了Bezier函数的理解

3：绘图原理参考：http://blog.youkuaiyun.com/hmg25/article/details/6306479 此大神

废话不多说，直接源码吧

package com.fpd.myapplication;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Region;
import android.text.Layout;
import android.text.StaticLayout;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Created by KXDoffice on 2015/12/30.
 */
public class ClippingTest extends View {

    private Paint mPaint;
    private Path mPath;
    private String testString = "拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。";
    private String secondString = "时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”，无数海贼扬起旗帜，互相争斗。一个叫路飞的少年为了与因救他而断臂的香克斯的约定而出海，在旅途中不断寻找志同道合的伙伴，开始了以成为海贼王为目标的伟大冒险旅程.";
    private int width;
    private int height;
    private TextPaint textPaint = new TextPaint();
    private TextPaint secondPaind = new TextPaint();
    private boolean clip = false;
    private double x;
    private double y;
    private ValueAnimator clipAnim;
    private Point pEnd;
    private Point pStart;
    private Point pMiddle;
    private Paint pathPaint;
    private boolean animStart = false;

    public ClippingTest(Context context){
        super(context);
        init();
    }

    public ClippingTest(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init(){
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(5);
        mPaint.setTextSize(50);
        mPaint.setStyle(Paint.Style.STROKE);
        textPaint.setTextSize(70);
        clipAnim = ValueAnimator.ofFloat(0,1);
        pathPaint =mPaint;
        pathPaint.setShadowLayer(20,0,0,Color.GRAY);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Canvas newCanvas = canvas;
        width = getWidth();
        height = getHeight();
        if (pEnd == null)
            pEnd = new Point(width,height);
        if (pStart == null)
            pStart = new Point(-width/8 , height*12/13);
        if (pMiddle ==null)
            pMiddle = new Point(width*5/9,height*13/16);
        StaticLayout layout = new StaticLayout(testString,textPaint,width-30, Layout.Alignment.ALIGN_NORMAL,1.0F,0.0F,true);
        StaticLayout layout2 = new StaticLayout(secondString,textPaint,width-30, Layout.Alignment.ALIGN_NORMAL,1.0F,0.0F,true);
        if (clip){
            canvas.save();
            mPath = new Path();
            double mw = width- x;
            double mh = height - y;
            double length = Math.sqrt(mw*mw+mh*mh);
            mPath.moveTo(width, (float) (height - length * length / 2 / mh * 4 / 3));
            mPath.quadTo(width, (float) (height - length * length / 2 / mh), (float) x, (float) y);
            mPath.quadTo((float) (Math.max(0, width - length * length / 2 / mw)), height, (float) (Math.max(0, width - length * length / 2 / mw * 4 / 3)), height);
            mPath.lineTo(width, height);
            mPath.close();


            Path p = new Path();
            p.moveTo(0, 0);
            p.lineTo(width, 0);
            p.lineTo(width, height);
            p.lineTo(0, height);
            p.lineTo(0, 0);

            canvas.clipPath(p);
            canvas.clipPath(mPath, Region.Op.DIFFERENCE);
            canvas.drawPath(mPath, pathPaint);
            canvas.translate(30, 30);

            layout.draw(canvas);
            canvas.restore();
            canvas.save();

            Path pnext = new Path();
            pnext.moveTo(width, (float) (height - length * length / 2 / mh * 4 / 3)+50);
            pnext.lineTo((float) (Math.max(0, width - length * length / 2 / mw * 4 / 3)+50), height);
            pnext.lineTo(width, height);
            canvas.clipPath(pnext);
            canvas.translate(30, 30);
            layout2.draw(canvas);
//            canvas.save();
//            canvas.restore();
        }else{
            canvas.translate(30.0f, 30.0f);
            layout.draw(canvas);
        }


    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        if (event.getAction() == MotionEvent.ACTION_DOWN){
            clip = true;
        }
        if (event.getAction() == MotionEvent.ACTION_MOVE){
            x = event.getRawX();
            y = event.getRawY();
            clip = true;
            postInvalidate();
        }
        if (event.getAction() == MotionEvent.ACTION_UP){

            if (clip&&event.getRawX()>width*2/3 && event.getRawY()>height*2/3){
                clipstart();
            }
            //postInvalidate();
        }

        return true;
    }

    private void clipstart(){
        clipAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                x = myBezierX((Float) animation.getAnimatedValue());
                y = myBezierY((Float) animation.getAnimatedValue());
                postInvalidate();
            }
        });

        clipAnim.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                animStart = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (animStart){
                    clip = false;
                    String temp = testString;
                    testString = secondString;
                    secondString =temp;
                    postInvalidate();
                    animStart =false;
                }

            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        clipAnim.setDuration(900);

        clipAnim.start();
    }


    private float myBezierX(float value){
        return (1-value)*(1-value)*pEnd.getX()+2*value*(1-value)*pMiddle.getX()+value*value*pStart.getX();
    }

    private float myBezierY(float value){
        return (1-value)*(1-value)*pEnd.getY()+2*value*(1-value)*pMiddle.getY()+value*value*pStart.getY();
    }

    /**
     * 内部类 Point
     */

    private class Point{

        private int x;
        private int y;

        public Point(int x,int y){
            this.x = x;
            this.y = y;
        }


        public int getX() {
            return x;
        }

        public void setX(int x) {
            this.x = x;
        }

        public int getY() {
            return y;
        }

        public void setY(int y) {
            this.y = y;
        }
    }
}