自定义一个酷炫的提交完成按钮

作者 夏至，欢迎转载，也请保留这段申明，谢谢
http://blog.csdn.net/u011418943/article/details/73555330

最近在学习自定义view，刚好有个需求是做一个点击完成的动画，所以就运用上了，效果如下：

把动画分解出来其实很简单，步骤如下：

• 把两边的圆角变成圆
• 把长椭圆变成缩小变成一个圆，文字渐变为无，可以用setalpha属性
• 圆从底部上升并变大，这没什么好说的，改变Y轴的值即可
• 打钩，这个也比较简单，用PathMeasure画勾就可以了

完成代码在底部，下面是简单分析：

1.1 圆角转圆

这个比较简单，首先我们先用 drawRoundRect 设置好圆角，想一下，从圆角到到圆，变化的是什么？没有就 drawRoundRect 的中间两个参数，只要把它变成圆的半径大小，即 height 的一半即可。
所以，动画如下：

 //圆角变圆        mRectToRoundAnim = ValueAnimator.ofFloat(10,mRadius);        mRectToRoundAnim.setDuration(500);        mRectToRoundAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                mRectToRound = (float) valueAnimator.getAnimatedValue();                mStatus = 0;                invalidate();            }        });

获取到mRectToRound 的值，(好吧，这个命名有问题，自己去改吧)；

1.2 长圆变圆

这个也是很简单，改变它的长度接口，那长度是多少？ 我们是让它从两边移动过来的，所以就是 （width - height）/ 2；而在变的过程中，需要对文字渐变消失，可以使用 setalpha ，从255 到 0 即可。如下所示：

//长椭圆变圆动画,并让文字渐渐消失        mRoundToCircleAnim = ValueAnimator.ofFloat(0,(width-height)/2);        mRoundToCircleAnim.setDuration(1000);        mRoundToCircleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                mRoundToCircleOffert = (float) valueAnimator.getAnimatedValue();                int max = (width - height)/2 ;                int alpha = (int) ((float)(max - mRoundToCircleOffert)/max * 255);                mTextPaint.setAlpha(alpha);                mStatus = 0;                invalidate();            }        });

1.3 圆上升

这个就更简单了，改变Y轴坐标就可以了。：

  //小球上移        mCircleMoveAnim = ValueAnimator.ofFloat(0,300);        mCircleMoveAnim.setInterpolator(new AccelerateDecelerateInterpolator());        mCircleMoveAnim.setDuration(500);        mCircleMoveAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mMoveY = (float) animation.getAnimatedValue();                postInvalidate();            }        });

1.4 小球变大

上面中，我们都是用drawRoundToRect 的画的，为了方便，我们改成 drawcircle 来绘制，这个时候就可以添加一个 status，用来选择哪个；

   @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        switch (mStatus){            case 0:                //绘制椭圆等其他变化                drawoval(canvas);                break;            case 1:                //绘制小球变大并打钩                drawCircle(canvas);                break;        }    }

圆变大改变半径即可，有些不需要放大的，可以忽略这一步：

 //圆形变大动画        mCircleScaleAnim = ValueAnimator.ofFloat(height/2,height*2);        mCircleScaleAnim.setDuration(animTime);        mCircleScaleAnim.setInterpolator(new LinearInterpolator());        mCircleScaleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mCircleWidth = (float) animation.getAnimatedValue();                mStatus = 1;                postInvalidate();            }        });

1.5 打钩

前面的都比较简单，可能就打钩这里比较难，但真的难吗？当然不是，打钩我们完全可以用 pathmeasure 这个方法可以轻松搞定，就是打钩的左边需要计算；所以，首先显示打钩：

 //初始化打钩    private void initTick(){        mTickPaint = new Paint();        mTickPaint.setAntiAlias(true);        mTickPaint.setColor(Color.WHITE);        mTickPaint.setStyle(Paint.Style.STROKE);        mTickPaint.setStrokeWidth(10);        int x = width/2;  //小球的中心坐标 x        int y =  -300;   //小球的中心坐标 y        Path path = new Path();        //画勾        path.moveTo(x-45,y-15);        path.lineTo(x-15,y+20);        path.lineTo(x+60,y-40);        mTickPath = new Path();        mPathMeasure = new PathMeasure(path,false); //保存打钩的路径        mTickLength = mPathMeasure.getLength();  //获取打钩的总长度    }

然后我们在draw中这样写：

 mTickPath.reset();        mTickPath.rLineTo(0,0); //防止硬件加速的bug        float start = 0;        float end = mTickLength * mTickDrawOffsert;        mPathMeasure.getSegment(start,end,mTickPath,true);        canvas.drawPath(mTickPath,mTickPaint);

其中mTickPath 通过 valueanimator 来获取：

// 打钩动画        mTickAnim = ValueAnimator.ofFloat(0,1);        mTickAnim.setDuration(1000);        mTickAnim.setInterpolator(new AccelerateInterpolator());        mTickAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mTickDrawOffsert = (float) animation.getAnimatedValue();                mStatus = 1;                Log.d(TAG, "onAnimationUpdate: "+mTickDrawOffsert);                postInvalidate();            }        });

1.6 动画整合

上面中，我们用到很多动画，为了使它变得很流畅，那肯定得用 animatorset 啦，在点击的时候，开始我们的表演：

setOnClickListener(new OnClickListener() {            @Override            public void onClick(View view) {                AnimatorSet bound = new AnimatorSet();                bound.play(mRectToRoundAnim).with(mRoundToCircleAnim);                AnimatorSet circle = new AnimatorSet();                circle.play(mCircleMoveAnim)                        .before(mCircleScaleAnim)                        .after(bound);                AnimatorSet animatorSet = new AnimatorSet();                animatorSet.play(mTickAnim).after(circle);                animatorSet.start();                setClickable(false);            }        });

注意观察animatorset 的 play， with，befor，after 哦

这样就完成了所有动画了，其实也没啥好讲的，就一些基础动画；下面是完成代码；

xml :

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:clipChildren="false"    android:clipToPadding="false"    tools:context="com.toptech.tvhouse.MainActivity"  >    <com.toptech.tvhouse.view.CoolButton        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:onClick="call"        app:text="一键加速"        app:textsize="18sp"        android:layout_alignParentBottom="true"        android:layout_marginBottom="20dp"        android:text="call phone"/></RelativeLayout>

文字和大小在 attrs.xml 中：

<declare-styleable name="CoolButton">        <attr name="text" format="string"/>        <attr name="textsize" format="dimension"/>    </declare-styleable>

java 完成代码

/** * Created by zhengshaorui on 2017/5/29. */public class CoolButton extends View {    private static final String TAG = "zsr";    private Paint mPaint;     //圆画笔    private Paint mTextPaint;  //文字画笔    private Paint mTickPaint; //打钩画笔    private int width,height;    private int mRadius;    private float mRectToRound = 10;    private float mRoundToCircleOffert = 0;    private int mStatus;//根据不同类型draw不同动画    private String mButtonText = "";    private float mMoveY = 0;    private float mCircleWidth;    private Context mContext;    private Path mTickPath = new Path();    private ValueAnimator mRectToRoundAnim,mRoundToCircleAnim;    private ValueAnimator mCircleScaleAnim;    private ValueAnimator mCircleMoveAnim;    private PathMeasure mPathMeasure;    private float mTickLength;    private float mTickDrawOffsert;    private ValueAnimator mTickAnim;    public CoolButton(Context context) {        this(context,null);    }    public CoolButton(Context context, AttributeSet attrs) {        this(context, attrs,0);    }    public CoolButton(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        //通过这个方法，将attrs中定义的declare-styleable 的所有属性的值存到typedarry里        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CoolButton);        int textsize = 0;        for (int i = 0; i < ta.length(); i++) {            int attr = ta.getIndex(i);            switch (attr) {                case R.styleable.CoolButton_text:                    mButtonText = ta.getString(R.styleable.CoolButton_text);                    textsize = ta.getDimensionPixelSize(R.styleable.CoolButton_textsize,0);                    Log.d(TAG, "CoolButton: "+mButtonText);                    break;            }        }        ta.recycle(); //调用完记得recycle掉，避免重复调用        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setColor(Color.BLUE);        mTextPaint = new Paint();        mTextPaint.setAntiAlias(true);        mTextPaint.setColor(Color.WHITE);        mTextPaint.setTextSize(textsize);        mContext = context;        setOnClickListener(new OnClickListener() {            @Override            public void onClick(View view) {                AnimatorSet bound = new AnimatorSet();                bound.play(mRectToRoundAnim).with(mRoundToCircleAnim);                AnimatorSet circle = new AnimatorSet();                circle.play(mCircleMoveAnim)                        .before(mCircleScaleAnim)                        .after(bound);                AnimatorSet animatorSet = new AnimatorSet();                animatorSet.play(mTickAnim).after(circle);                animatorSet.start();                setClickable(false);            }        });    }    private void initTick(){        mTickPaint = new Paint();        mTickPaint.setAntiAlias(true);        mTickPaint.setColor(Color.WHITE);        mTickPaint.setStyle(Paint.Style.STROKE);        mTickPaint.setStrokeWidth(10);        int x = width/2;        int y =  -300;        Path path = new Path();        //画勾        path.moveTo(x-45,y-15);        path.lineTo(x-15,y+20);        path.lineTo(x+60,y-40);        mTickPath = new Path();        mPathMeasure = new PathMeasure(path,false);        mTickLength = mPathMeasure.getLength();    }    @Override    public boolean isFocused() {        return super.isFocused();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        switch (mStatus){            case 0:                drawoval(canvas);                break;            case 1:                drawCircle(canvas);                break;        }        /*int x = width/2;        int y =  -300;        canvas.drawCircle(x,y,height*2,mPaint);        Path path = new Path();        //画勾        path.moveTo(x-50,y-15);        path.lineTo(x-10,y+30);        path.lineTo(x+60,y-40);        canvas.drawPath(path,mTickPaint);*/    }    /**     * 画圆角以及上升过程     * @param canvas     */    private void drawoval(Canvas canvas){        RectF rectF = new RectF(mRoundToCircleOffert,0 - mMoveY,width - mRoundToCircleOffert,height - mMoveY);        canvas.drawRoundRect(rectF, mRectToRound, mRectToRound,mPaint);        //绘制文字        float textwidth = mTextPaint.measureText(mButtonText);        float x = (width - textwidth)/2;        Paint.FontMetrics metrics = mTextPaint.getFontMetrics();        float textheight = (metrics.descent + metrics.ascent);        float y =  height/2 - textheight/2;        canvas.drawText(mButtonText,x,y,mTextPaint);    }    /**     * 小圆变大并打钩     * @param canvas     */    private void drawCircle(Canvas canvas){        canvas.drawCircle((width)/2,-mMoveY,mCircleWidth,mPaint);        mTickPath.reset();        mTickPath.rLineTo(0,0); //防止硬件加速的bug        float start = 0;        float end = mTickLength * mTickDrawOffsert;        mPathMeasure.getSegment(start,end,mTickPath,true);        canvas.drawPath(mTickPath,mTickPaint);    }    private void AnimInit(){        final int animTime = 500;        //圆角变圆        mRectToRoundAnim = ValueAnimator.ofFloat(10,mRadius);        mRectToRoundAnim.setDuration(500);        mRectToRoundAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                mRectToRound = (float) valueAnimator.getAnimatedValue();                mStatus = 0;                invalidate();            }        });        //长椭圆变圆动画,并让文字渐渐消失        mRoundToCircleAnim = ValueAnimator.ofFloat(0,(width-height)/2);        mRoundToCircleAnim.setDuration(1000);        mRoundToCircleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                mRoundToCircleOffert = (float) valueAnimator.getAnimatedValue();                int max = (width - height)/2 ;                int alpha = (int) ((float)(max - mRoundToCircleOffert)/max * 255);                mTextPaint.setAlpha(alpha);                mStatus = 0;                invalidate();            }        });        //小球上移        mCircleMoveAnim = ValueAnimator.ofFloat(0,300);        mCircleMoveAnim.setInterpolator(new AccelerateDecelerateInterpolator());        mCircleMoveAnim.setDuration(500);        mCircleMoveAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mMoveY = (float) animation.getAnimatedValue();                postInvalidate();            }        });        //圆形变大动画        mCircleScaleAnim = ValueAnimator.ofFloat(height/2,height*2);        mCircleScaleAnim.setDuration(animTime);        mCircleScaleAnim.setInterpolator(new LinearInterpolator());        mCircleScaleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mCircleWidth = (float) animation.getAnimatedValue();                mStatus = 1;                postInvalidate();            }        });        // 打钩动画        mTickAnim = ValueAnimator.ofFloat(0,1);        mTickAnim.setDuration(1000);        mTickAnim.setInterpolator(new AccelerateInterpolator());        mTickAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mTickDrawOffsert = (float) animation.getAnimatedValue();                mStatus = 1;                Log.d(TAG, "onAnimationUpdate: "+mTickDrawOffsert);                postInvalidate();            }        });    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        width = measureWidth(widthMeasureSpec);        height = measureHeight(heightMeasureSpec);        mRadius = height/2;        //需要用到   width，height 都在这初始化        AnimInit();        initTick();        setMeasuredDimension(width, height);    }    //设置高的大小    private int measureHeight(int heightMeasureSpec) {        // TODO Auto-generated method stub        int result = 0;        //获取模式和大小        int specMode = MeasureSpec.getMode(heightMeasureSpec);        int specSize = MeasureSpec.getSize(heightMeasureSpec);        if (specMode == MeasureSpec.EXACTLY) {            result = specSize;        } else {            result = 70; //如果是wrap_content ,给个初始值            if (specMode == MeasureSpec.AT_MOST) {                result = Math.min(result, specSize);            }        }        return result;    }    //设置宽的大小    private int measureWidth(int widthMeasureSpec) {        // TODO Auto-generated method stub        int result = 0;        //获取模式和大小        int specMode = MeasureSpec.getMode(widthMeasureSpec);        int specSize = MeasureSpec.getSize(widthMeasureSpec);        if (specMode == MeasureSpec.EXACTLY) {            result = specSize;        } else {            result = 70; //如果是wrap_content ,给个初始值            if (specMode == MeasureSpec.AT_MOST) {                result = Math.min(result, specSize);            }        }        return result;    }}