自定义一个酷炫的提交完成按钮
程序员文章站
2024-03-22 22:04:40
...
作者 夏至，欢迎转载，也请保留这段申明，谢谢
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;
}
}推荐阅读