先来看看效果:
按钮的效果看到了吗?
我们就要实现这个炫酷的效果。
这里我使用自定义字体图标View,不知道怎么自定义的朋友请参考我的另外一篇博客: Android怎么使用字体图标 自定义FontTextView字体图标控件-- 使用方法
代码很简单,可以把代码带入其他的View中都可以实现这样的点击效果
public class FontTextView extends TextView { private static final int FRAME_RATE = 10; private static final int DURATION = 250; private static final int FILL_INITIAL_OPACITY = 200; private static final int STROKE_INITIAL_OPACITY = 255; private float mHalfWidth; private float mHalfHeight; private boolean mAnimationIsRunning = false; private int mTimer = 0; private Paint mFillPaint; private Paint mStrokePaint; public FontTextView(Context context, AttributeSet attrs) { super(context, attrs); // 引入字体图标 // Typeface font = Typeface.createFromAsset(context.getAssets(), // "iconFont/iconfont.ttf"); // 设置字体图标 this.setTypeface(YktApplication.FONT); init(); } private void init() { if (isInEditMode()) { return; } //设置画笔颜色 int rippleColor = getResources().getColor(R.color.format_bar_ripple_animation); //设置实心画笔 mFillPaint = new Paint(); mFillPaint.setAntiAlias(true); mFillPaint.setColor(rippleColor); mFillPaint.setStyle(Paint.Style.FILL); mFillPaint.setAlpha(FILL_INITIAL_OPACITY); //设置空心画笔 mStrokePaint = new Paint(); mStrokePaint.setAntiAlias(true); mStrokePaint.setColor(rippleColor); mStrokePaint.setStyle(Paint.Style.STROKE); mStrokePaint.setStrokeWidth(2); mStrokePaint.setAlpha(STROKE_INITIAL_OPACITY); //自定义View中如果重写了onDraw()即自定义了绘制,那么就应该在构造函数中调用view的setWillNotDraw(false),设置该flag标志。默认该标志就是false。 setWillNotDraw(false); } @Override public void draw(Canvas canvas) { super.draw(canvas); //用来循环的绘制 if (mAnimationIsRunning) { //是否循环条件判断 if (DURATION <= mTimer * FRAME_RATE) { //用来停止循环绘制的变化的条件 mAnimationIsRunning = false; mTimer = 0; } else { //绘制 float progressFraction = ((float) mTimer * FRAME_RATE) / DURATION; mFillPaint.setAlpha((int) (FILL_INITIAL_OPACITY * (1 - progressFraction))); mStrokePaint.setAlpha((int) (STROKE_INITIAL_OPACITY * (1 - progressFraction))); //各个参数 mHalfWidth:圆心x坐标 mHalfHeight:圆心y坐标 ,半径 ,画笔 canvas.drawCircle(mHalfWidth, mHalfHeight, mHalfWidth * progressFraction, mFillPaint); canvas.drawCircle(mHalfWidth, mHalfHeight, mHalfWidth * progressFraction, mStrokePaint); mTimer++; } invalidate(); //重绘 用作循环,执行这条语句的话会再次调用draw方法 } } @Override public boolean onTouchEvent(@NonNull MotionEvent event) { //监听触摸事件,执行绘制 startRippleAnimation(); return super.onTouchEvent(event); } private void startRippleAnimation() { if (this.isEnabled() && !mAnimationIsRunning) { //获取圆心坐标 mHalfWidth = getMeasuredWidth() / 2; mHalfHeight = getMeasuredHeight() / 2; mAnimationIsRunning = true; invalidate(); } } }
是不是很简单,是的就是这么简单。