• 自定义简单的按钮点击动画效果


    先来看看效果:

    按钮的效果看到了吗?

    我们就要实现这个炫酷的效果。

    这里我使用自定义字体图标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();
            }
        }
    }

    是不是很简单,是的就是这么简单。

  • 相关阅读:
    centos7安装nginx和php7启动脚本
    centos7 安装nginx遇到的坑
    php7.2 编译遇到的坑
    yum源更新
    redis
    nginx日志分割
    Docker部署LNMP完整教程
    浅谈JavaScript词法分析步骤
    PHP面向对象中的重要知识点(一)
    Mysql精华版(命令大全)
  • 原文地址:https://www.cnblogs.com/woaixingxing/p/6290155.html
Copyright © 2020-2023  润新知