先說明一下，項目代碼已上傳至github，不想看長篇大論的也可以先去下代碼，對照代碼，哪里不懂點哪里。
代碼在這https://github.com/zgzczzw/ZHFollowButton

前幾天發(fā)現(xiàn)知乎關(guān)注的點擊效果確實贊，查了一下實現(xiàn)方式，剛好看到這個問題，花了一天時間終于把這個效果實現(xiàn)了，現(xiàn)在來回答一下，很不幸，樓上各位的答案都不全對，且聽我一一道來。

首先，我先詳細(xì)觀察了一些知乎的效果，其中有一個很神奇的地方，如圖：

注意看第二張圖，這個圓形在擴散的時候，圓形底下的字還在，而且新的字也在圓形上，就這個效果實現(xiàn)起來最難。

首先看一下樓上各位的回答，歸納來說，一共有2種實現(xiàn)方式，ripple效果和用paint在canvas上手動畫圓

ripple：

ripple即波紋效果，是android API 21以后引入的一種material design的元素，是觸摸反饋的一種，也就是說點擊的時候會出現(xiàn)水波擴散的樣式，demo（見最后）中第一個按鈕就是用了ripple效果。

實現(xiàn)方式很簡單，實現(xiàn)一個這樣的drawable

第一個color是波紋顏色，item里面指定background正常的顏色，可以是一個shape，也可以是一個drawable，還可以是一個selector。

設(shè)置為按鈕的background即可

如果整個程序的theme用了meterial，那基本所有的帶點擊效果的控件，比如button都自帶這個波紋效果。不過需要注意的是這一套API是21以后才提供的，所以需要做兼容處理。

效果如下：

從圖中可以看出即使我設(shè)置了波紋為紅色（#FF0000），點擊后的效果也是淡紅色，我猜測因為是水波紋效果，為了不影響按鈕本身展示的內(nèi)容，android系統(tǒng)自動做了透明度的處理，另外從圖中也可以明顯的看出，水波紋和顯示的內(nèi)容是上下兩層的，互不影響，水波紋是在background層面上。這個效果做普通的點擊反饋還不錯，但絕對實現(xiàn)不出知乎這種用波紋刷新出內(nèi)容的效果。所以很容易能看出知乎的點擊效果不是用ripple做出來的。

Paint在canvas上畫圓

@chaossss 所說的用 paint在點擊的地方畫圓形，然后讓畫的圓形半徑慢慢變大，實現(xiàn)出擴散出去的樣式，我實現(xiàn)了一下，代碼如下：

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mShouldDoAnimation) {
mMaxRadius = getMeasuredWidth() + 50;
if (mRevealRadius > mMinBetweenWidthAndHeight / 2)
mRevealRadius += mRevealRadiusGap * 4;
else
mRevealRadius += mRevealRadiusGap;//半徑變大
Paint mPaint = new Paint();
if (!mIsPressed) {
mPaint.setColor(Color.WHITE);
} else {
mPaint.setColor(Color.RED);
}//設(shè)置畫筆顏色
mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(mCenterX, mCenterY, mRevealRadius, mPaint);

if (mRevealRadius <= mMaxRadius) {
//一定時間后再刷新
postInvalidateDelayed(INVALIDATE_DURATION);
} else {
if (mIsPressed) {
setTextColor(Color.WHITE);
this.setBackgroundColor(Color.RED);
} else {
setTextColor(Color.BLACK);
this.setBackgroundColor(Color.WHITE);
}
mShouldDoAnimation = false;
invalidate();
}
}
}

效果如圖：

本來覺得差不多就是這樣，但是跟知乎的效果比較一下，還是能發(fā)現(xiàn)差別的。用paint畫圓能實現(xiàn)的是在點擊的地方畫一個圓，然后半徑慢慢變大慢慢擴散。但是問題在于，畫的這個圓會蓋住顯示的內(nèi)容，而且畫的圓上也不能顯示內(nèi)容。我試過用drawText，也實現(xiàn)不了字和圓一起的效果，解決方法只有，畫的過程中改背景色和上面文字。

然后，畫完圓之后把圓擦掉，把下面的背景色和文字顯示出來。

這樣就會出現(xiàn)一次文字閃爍的問題，首先文字會消失掉，然后畫完圓之后才顯示出來。因為圓在擴散的時候是看不到文字的，只有等圓消失了，文字才能顯示出來。而知乎的效果是文字和圓一起刷出來，而且底下的文字還在，中間也沒有文字閃爍的問題，整個過程行云流水，看起來很順暢，好像用圓形揭開了幕布一樣。

綜上所述，樓上所有的答案都是答主們看到這個效果后第一反應(yīng)的實現(xiàn)，其實如果不是我自己實現(xiàn)了一下，真的以為第二種方法就是知乎采用的，但是目前看來，很遺憾，知乎采用了一種更好的方式來實現(xiàn)這個效果。

那怎么辦呢，我也沒什么思路，怎么才能在畫圓的時候把字也畫在圓上，然后圓下面的背景也還有呢。沒什么思路，看看知乎的代碼吧，反編譯。

反編譯的過程我簡單說一下：

到知乎官網(wǎng)下載最新的知乎apk

用apktool反編譯apk，得到資源文件

在資源文件中搜索follow，這里一開始我搜的是ripple，因為我覺得這個效果總歸應(yīng)該和ripple有關(guān)，沒結(jié)果，于是搜了follow，沒想到還真搜出來了。

RevealFollowButton這明顯就是我們要的波紋展開的控件，這就好說了，下一步就是去代碼里找到這個控件了。這里要記一下，這個控件的位置com.zhihu.android.app.ui.widget.RevealFollowButton。

反編譯代碼

將apk改名成rar，打開，可以找到里面的class文件

知乎用了multidex，所以會有兩個class文件，都拖出來放在dex2jar里反編譯一下，就能生成兩個jar包了，把jar包放在GUI里看一下，就能看到代碼了，雖然代碼被混淆過，但是基本邏輯還是能看出來的。

然后根據(jù)前面xml里的路徑找到RevelFollowButton的位置，打開代碼看就可以了。

這是類的繼承關(guān)系，RevealFollowButton繼承自RevealFrameLayout，然后繼承自ZHFrameLayout，這個ZHFrameLayout的父類就是FrameLayout了，從名字我們能看出，RevelFollowButton和RevealFrameLayout就是這個效果實現(xiàn)的兩個類了。

看到這個效果的實現(xiàn)是基于Framelayout，我就知道我們之前討論的方法其實都走錯了方向，如果告訴你用framelayout來實現(xiàn)這個效果，你會怎么做？

我的想法是加入兩個TextView到這個layout里，然后一個Visible一個gone，如此切換，后來看過代碼后，也證明我的這個想法是對的。

看，這里有兩個TextView。如此的話，其實切換TextView是很容易實現(xiàn)的，問題是怎么實現(xiàn)波紋切換的效果，那第一件事就是看onDraw函數(shù)了，對于GroupView來說是drawChild方法。

RevealFollowButton的drawChild方法沒什么內(nèi)容，基本是調(diào)用了父類，那么我們來看RevealFrameLayout的drawChild方法。

這里有兩部分邏輯，如果滿足一個條件，就做第一部分，一開始我也不知道這個條件是什么，混淆后的代碼能看懂大邏輯，像這種小邏輯只能走一步看一步了。所以假設(shè)這個條件永遠(yuǎn)false吧，看第二部分，看到這里瞬間明白了，原來是采用切割畫布的方式，把畫布切成一個圓的，就能做到顯示的內(nèi)容也在圓上，而不是內(nèi)容被覆蓋在圓下面了。然后同理，把這個圓形區(qū)域不斷擴大，然后不斷刷新，就是實現(xiàn)波形刷出內(nèi)容的效果了。代碼如下吧

protected boolean drawChild(Canvas canvas, View paramView, long paramLong) {
int i = canvas.save();
mPath.reset();
//mCenterX mCenterY是點擊的位置，在onTouchEvent里設(shè)置
//mRevealRadius是圓的半徑，會漸漸變大
mPath.addCircle(mCenterX, mCenterY, mRevealRadius, Path.Direction.CW);
canvas.clipPath(this.mPath);
boolean bool2 = super.drawChild(canvas, paramView, paramLong);
canvas.restoreToCount(i);
return bool2;
}

按照上面說的，肯定還有一個類似于定時器的東西，能不斷改變圓形的半徑，然后刷新，其實這個在代碼里找找很容易就找到了。RevealFrameLayout里除了這個drawChild，沒有別的代碼了。所以我們來看RevealFollowButton。

RevealFollowButton里面跟定時器有關(guān)的就是這句了

一個Animator對象，其實這句代碼我是沒看懂的，但邏輯很簡單，設(shè)置一個Animator，定時500ms，在這個過程中修改圓形半徑，然后刷新。

Math.hypot(getWidth(), getHeight()))

其中這個方法是根據(jù)勾股定理獲取三角形的斜邊長度，想想我們所要繪制的圓形半徑最長是多少，沒錯，就是TextView的對角線長度。所以，整個邏輯就很簡單了。

我搞了下代碼，就這樣吧

整個方法的代碼如下吧，還包括控制FollowTv和unFollowTv哪個顯示

protected void setFollowed(boolean isFollowed, boolean needAnimate) {
mIsFollowed = isFollowed;
if (isFollowed) {
mUnFollowTv.setVisibility(View.VISIBLE);
mFollowTv.setVisibility(View.VISIBLE);
mFollowTv.bringToFront();
} else {
mUnFollowTv.setVisibility(View.VISIBLE);
mFollowTv.setVisibility(View.VISIBLE);
mUnFollowTv.bringToFront();
}
if (needAnimate) {
ValueAnimator animator = ObjectAnimator.ofFloat(mFollowTv, "empty", 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.start();
}
}

根據(jù)當(dāng)前狀態(tài)把Follow的Textview或UnFollow的TextView顯示出來，然后設(shè)置一個定時器不斷擴大所要繪制圓的半徑，根據(jù)這個半徑裁剪畫布成一個漸漸變大的圓形，然后內(nèi)容就漸漸顯示出來了。

這個效果實現(xiàn)出來之后，試著運行一下，還不錯，但是總覺得有地方不對，于是細(xì)細(xì)觀察，終于發(fā)現(xiàn)了，知乎的那個效果在刷新的時候，底下的背景不是白色的，還是之前的狀態(tài)，比如要變成關(guān)注的時候，背景中的未關(guān)注還是在的，而我們實現(xiàn)的這個，刷新的時候背景是白色的。

這是知乎的

這是我的

所以還是沒有知乎那么行云流水，所以我們是少了什么嗎。這時候想起來了，之前在RevealFrameLayout的drawChild里有一個判斷條件，當(dāng)時我們不知道它的邏輯是干什么的，現(xiàn)在看來。那部分邏輯就是處理這個的，畫子控件的時候，要畫兩個，F(xiàn)ollowTextView和UnFollowTextView，要隨圓形刷出的控件我們采用裁剪畫布的方式慢慢畫出。那作為背景的另一個控件就不需要慢慢畫出，只要完全畫出來就行了。所以，猜想這里這個判斷條件就是判斷當(dāng)前控件是不是要隨圓形刷出的控件，如果不是，就直接畫出來就行了。所以修改代碼如下：

protected boolean drawChild(Canvas canvas, View paramView, long paramLong) {
if (drawBackground(paramView)) {
return super.drawChild(canvas, paramView, paramLong);
}
int i = canvas.save();
mPath.reset();
mPath.addCircle(mCenterX, mCenterY, mRevealRadius, Path.Direction.CW);
canvas.clipPath(this.mPath);
boolean bool2 = super.drawChild(canvas, paramView, paramLong);
canvas.restoreToCount(i);
return bool2;
}

判斷的方法如下：

private boolean drawBackground(View paramView) {
if (mIsFollowed && paramView == mUnFollowTv) {
return true;
} else if (!mIsFollowed && paramView == mFollowTv) {
return true;
}
return false;
}

至此，整個效果就和知乎完全一樣了，刷新過程行云流水，非常贊。效果如下

實現(xiàn)代碼已上傳至github：

https://github.com/zgzczzw/ZHFollowButton

以上所述是小編給大家介紹的Android仿知乎客戶端關(guān)注和取消關(guān)注的按鈕點擊特效實現(xiàn)思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論