仿知乎关注按钮的波纹效果

恩~~,算了不废话了，直接入主题吧！

这篇文章介绍一个老版知乎关注按钮的波纹动画。

先上效果图

、

一共有三种实现，接下来我会一一分析。

第一种,在按钮上设置背景

第一种也是最简单的，直接在按钮上设置背景，实现点击背景的波纹效果。

<Button
    android:layout_width="78dp"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_ripple_selector"
    android:text="关注"
    android:layout_margin="13dp" />

对应的背景,注意 ripple标签需要在sdk21之上才能使用

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FF0000">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</ripple>

第二种自定义view,并在按钮上绘制圆环扩散

第二种的思路也很简单,就是一个绘制圆环的属性动画，结束后修改文本。

//获取点击坐标
@Override
public boolean onTouchEvent(MotionEvent event) {
    int action = event.getAction();
    switch (action) {
        case MotionEvent.ACTION_DOWN:
            mCenterX = event.getX();
            mCenterY = event.getY();
            mRevealRadius = 0f;
            startAnimation();
            return true;
    }
    return false;
}

需要注意的是,圆弧的半径没有确定,本方法中通过 Math.hypot方法计算

(float) Math.hypot(getMeasuredWidth(), getMeasuredHeight())

开始动画

protected void startAnimation() {
    ValueAnimator animator = ObjectAnimator.ofFloat(this, "", 0.0F, (float) Math.hypot(getMeasuredWidth(), getMeasuredHeight()));
    animator.setDuration(500L);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            //不断的计算半径来重绘制动画
            mRevealRadius = (Float) animation.getAnimatedValue();
            invalidate();
        }

    });

    animator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {

        }

        @Override
        public void onAnimationEnd(Animator animator) {
            if (mIsPressed) {
                setTextColor(Color.WHITE);
                setBackgroundColor(Color.RED);
                setText("未关注");
            } else {
                setTextColor(Color.BLACK);
                setBackgroundColor(Color.WHITE);
                setText("关注");
            }
            mRevealRadius = 0;
            mIsPressed = !mIsPressed;
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });
    animator.start();
}

onDraw方法

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (!mIsPressed) {
        mPaint.setColor(Color.WHITE);
    } else {
        mPaint.setColor(Color.RED);
    }
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(mCenterX, mCenterY, mRevealRadius, mPaint);
}

第三种方法

观察效果图可以看出,新的view是在原来的视图基础上做绘制圆环的变化的。
要想实现这样的效果我们起码得有两个view。

拿未关注-->关注 这个过程来说明。我们就得有一个红底的未关注的TextView和白底的关注TextView两个view。、

那么点击按钮发生了什么呢？
在这个过程中,我们先绘制红底未关注的view,之后再这个基础上再绘制附加了动画效果的白底关注的view。

在展示具体代码之前,先解释几个api。

drawChild(Canvas canvas, View child, long drawingTime)

drawChild执行在onDraw()之后，分别绘制viewGroup中的子view。

canvas.clipPath(Path path,Region.Op op)
//op==Region.Op.INTERSECT 表示表集，本文中使用到的属性

canvas.clipPath() 根据op参数,裁剪画布。通俗点讲,就是展示的view根据path来决定，跟你的canvas大小无关。(前提是path不大于canvas)

初始化view

private void init() {
    mFollowTv = new TextView(getContext());
    mFollowTv.setText("关注");
    mFollowTv.setGravity(17);
    mFollowTv.setSingleLine();
    mFollowTv.setBackgroundColor(Color.WHITE);
    mFollowTv.setTextColor(Color.BLACK);
    addView(this.mFollowTv);

    mUnFollowTv = new TextView(getContext());
    mUnFollowTv.setText("未关注");
    mUnFollowTv.setGravity(17);
    mUnFollowTv.setSingleLine();
    mUnFollowTv.setBackgroundColor(Color.RED);
    mUnFollowTv.setTextColor(Color.WHITE);
    addView(this.mUnFollowTv);

    mFollowTv.setPadding(40, 40, 40, 40);
    mUnFollowTv.setPadding(40, 40, 40, 40);
}

点击事件,mIsFollowed用来标记当前点击状态

public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            return true;
        case MotionEvent.ACTION_UP:
            mIsFirstInit = false;
            mCenterX = event.getX();
            mCenterY = event.getY();
            mRevealRadius = 0;
            startAnimation(!mIsFollowed);
            return true;
    }
    return false;
}

动画相关代码,这里注意需要根据mIsFollowed来切换mFollowTv和
mUnFollowTv那个view的展示在最前方(即对于我们来说最先看到的)

protected void startAnimation(boolean isFollowed) {
    mIsFollowed = isFollowed;
    if (isFollowed) {
        mFollowTv.bringToFront();
    } else {
        mUnFollowTv.bringToFront();
    }
    ValueAnimator animator = ObjectAnimator.ofFloat(mFollowTv, "", 0.0F, (float) Math.hypot(getMeasuredWidth(), getMeasuredHeight()));
    animator.setDuration(2000L);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mRevealRadius = (Float) animation.getAnimatedValue();
            invalidate();
        }
    });
    animator.start();
}

绘制视图,使用drawChild()

protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
    if (drawBackground(child)) {
        return super.drawChild(canvas, child, drawingTime);
    }
    mPath.reset();
    mPath.addCircle(mCenterX, mCenterY, mRevealRadius, Path.Direction.CW);
    canvas.clipPath(mPath, Region.Op.INTERSECT);
    return super.drawChild(canvas, child, drawingTime);
}

绘制底图drawBackground(view child);

private boolean drawBackground(View paramView) {
    if (mIsFirstInit) {
        return true;
    }
    //目标视图是白底的关注视图,在变化的过程中,每次都需要绘制红底的未关注视图作为背景使用
    if (mIsFollowed && paramView == mUnFollowTv) {     
        return true;
    } else if (!mIsFollowed && paramView == mFollowTv) {
        return true;
    }
    return false;
}

解释一下drawChild()和drawBackground()流程,还是按照
未关注-->关注这个变化过程来解释。

观察文章开头的效果图,点击之后，关注的圆环一点点扩散开来的时候，未关注的底图还是存在的。所以我们每次在调用drawChild()都会绘制一次红底未关注的view。

if (drawBackground(child)) {
        return super.drawChild(canvas, child, drawingTime);
}

if (mIsFollowed && paramView == mUnFollowTv) {     
        return true;
}

上述这两段代码就会做出判断,当目标视图是关注,并且当前准备绘制的view是未关注时,就通过系统的方法绘制的底图，不然就执行

canvas.clipPath(mPath, Region.Op.INTERSECT);

来绘制白底关注的圆环view。这样就能实现文章开头的那个效果了。.

相关链接

仿知乎广告效果

数字雨

最后贴上代码地址

https://github.com/niknowzcd/FunnyView

仿知乎关注按钮的波纹效果

第一种,在按钮上设置背景

第二种 自定义view,并在按钮上绘制圆环扩散

第三种方法

推荐阅读更多精彩内容

第二种自定义view,并在按钮上绘制圆环扩散