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

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

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

先上效果图

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

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

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

<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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 155,348评论 4 355
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 65,906评论 1 283
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,191评论 0 235
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,295评论 0 201
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,606评论 3 283
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,107评论 1 202
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,507评论 2 305
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,217评论 0 193
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,848评论 1 234
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,183评论 2 238
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,734评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,084评论 2 247
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,608评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,921评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,627评论 0 190
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,103评论 2 261
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,054评论 2 257

推荐阅读更多精彩内容