自定義一個酷炫的提交完成按鈕

weixin_34208283發表於2017-06-21

作者夏至，歡迎轉載，也請保留這段申明，謝謝
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;
    }
}

FloatingDragButton：炫酷的拖拽浮動按鈕
2017-08-11
自定義view之寫一個帶刪除按鈕的Edittext
2017-03-07
View
自定義View：自定義屬性(自定義按鈕實現)
2017-05-11
View
一個Form中2個按鈕，PHP後臺如何判斷提交的是哪一個按鈕
2015-04-22
ORMPHP
自定義有多個按鈕節點的SliderView
2018-07-10
IDEView
android 自定義酷炫進度條動畫
2019-01-27
Android動畫
一個form兩個提交按鈕,分別提交到兩頁面
2017-11-08
ORM
ABAP ALV TOOLBAR 自定義按鈕的型別以及listmenu按鈕
2009-09-18
型別
精選10款CSS3實現的酷炫按鈕效果
2014-12-18
CSSS3
iOS 自定義鍵盤字母按鈕
2018-11-27
iOS
使用自定義 View 繪製一個懸浮式可拖拽按鈕
2019-03-14
View
炫酷實用的jQuery外掛涵蓋選單、按鈕、圖片
2014-07-22
jQuery
超炫酷3D立體的CSS3彈性按鈕
2016-02-28
3DCSSS3
自定義View：實現炫酷的點贊特效（仿即刻）
2017-10-23
View特效
Qt QMessageBox::information 自定義按鈕
2024-03-06
QTORM
CSS3炫酷的發光文字可自定義文字色彩
2016-03-26
CSSS3
使用WPF建立炫亮按鈕
2009-01-06
「HTML+CSS」--自定義按鈕樣式【004】
2021-04-01
HTMLCSS
「HTML+CSS」--自定義按鈕樣式【003】
2021-03-30
HTMLCSS
antd-mobile 自定義picker按鈕樣式
2018-12-25
Qt自定義開關按鈕控制元件
2020-11-16
QT控制元件
[HTML/CSS]uploadify自定義按鈕樣式
2014-09-03
HTMLCSS
搞事情，自定義 LayoutInflater 實現酷炫引導頁
2019-03-04
搞事情，自定義 LayoutInflate 實現酷炫引導頁
2017-08-31
一個炫酷的仿雷達掃描和擴散效果——自定義View就是這麼簡單
2017-07-13
View
Android 自定義Switch開關按鈕的樣式
2018-01-25
Android
新增了自定義的編輯和刪除按鈕
2011-11-23
用 Vue 做一個酷炫的 menu
2017-11-21
Vue
PHP建立一個炫酷的圖表
2016-03-05
PHP
Flutter自定義控制元件第一式，炫酷“蛛網”控制元件
2019-04-18
Flutter控制元件
純CSS3實現超炫酷的3D開關切換按鈕
2016-02-27
CSSS33D
Windows API視窗程式設計 - 自定義按鈕
2019-07-30
WindowsAPI程式設計
「HTML+CSS」--自定義按鈕樣式【001】
2021-03-28
HTMLCSS
「HTML+CSS」--自定義按鈕樣式【002】
2021-03-29
HTMLCSS
Android 自定義實現switch開關按鈕
2017-08-24
Android
Android開發自定義View之滑動按鈕與自定義屬性
2014-10-23
AndroidView
vue寫一個炫酷的日曆元件
2019-03-01
Vue元件
Windows API視窗程式設計 - 完善自定義按鈕
2019-07-31
WindowsAPI程式設計