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

weixin_34208283發表於2017-06-21

原文網址 : https://blog.csdn.net/weixin_34208283/article/details/87232523

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

LabVIEW的自定義按鈕
2024-07-02
View
自定義有多個按鈕節點的SliderView
2018-07-10
IDEView
Qt QMessageBox::information 自定義按鈕
2024-03-06
QTORM
如何自定義radio按鈕的樣式
2024-11-26
android 自定義酷炫進度條動畫
2019-01-27
Android動畫
iOS 自定義鍵盤字母按鈕
2018-11-27
iOS
Simple WPF: WPF 自定義按鈕外形
2024-07-07
使用自定義 View 繪製一個懸浮式可拖拽按鈕
2019-03-14
View
搞事情，自定義 LayoutInflater 實現酷炫引導頁
2019-03-04
antd-mobile 自定義picker按鈕樣式
2018-12-25
Qt自定義開關按鈕控制元件
2020-11-16
QT控制元件
「HTML+CSS」--自定義按鈕樣式【004】
2021-04-01
HTMLCSS
「HTML+CSS」--自定義按鈕樣式【003】
2021-03-30
HTMLCSS
「HTML+CSS」--自定義按鈕樣式【001】
2021-03-28
HTMLCSS
「HTML+CSS」--自定義按鈕樣式【002】
2021-03-29
HTMLCSS
Windows API視窗程式設計 - 自定義按鈕
2019-07-30
WindowsAPI程式設計
C#自定義控制元件—旋轉按鈕
2024-09-07
C#控制元件
fastadmin新增自定義按鈕，並使用彈窗功能
2020-12-28
AST
Flutter自定義控制元件第一式，炫酷“蛛網”控制元件
2019-04-18
Flutter控制元件
vue寫一個炫酷的日曆元件
2019-03-01
Vue元件
一個炫酷的頭像懸停效果
2023-02-06
自定義按鈕圖片標題位置隨意放置
2018-12-20
ASPxGridView中Command列自定義按鈕點選事件概要
2018-06-12
View事件
Windows API視窗程式設計 - 完善自定義按鈕
2019-07-31
WindowsAPI程式設計
（五）自定義按鈕模板和設定觸發器
2024-10-02
觸發器
如何給 SAP Fiori Elements 應用新增自定義按鈕
2021-05-09
使用Flutter來完成Uplabs上炫酷的互動
2019-05-12
Flutter
Android自定義View之實現簡單炫酷的球體進度球
2018-12-29
AndroidView
直播平臺搭建原始碼，qt自定義滑動按鈕
2023-03-30
原始碼QT
Yii1自定義 CGridView 中的操作按鈕中 CButtonColumn 選項
2018-12-12
View
一個按鈕，一鍵傳功！
2020-11-23
前端特效【第02期】|多功能提交按鈕
2018-11-02
前端特效
uniapp點選按鈕提交textarea值為undifine
2020-10-04
APP
動手做一個酷炫（並不）的計算器(一）
2018-04-10
IQKeyboardManager 獲取完成按鈕的解決辦法
2019-01-16
基於VUE自定義指令實現按鈕級許可權控制
2019-03-04
Vue
Vue2-利用自定義指令實現按鈕許可權控制
2024-07-13
Vue
laravel admin 列展開自定義行操作增加編輯修改按鈕
2021-02-05
Laravel
android炫酷的textview
2018-08-28
AndroidTextView