恩~~,算了不廢話了，直接入主題吧！
這篇文章介紹一個(gè)老版知乎關(guān)注按鈕的波紋動(dòng)畫(huà)。
先上效果圖
、
一共有三種實(shí)現(xiàn)，接下來(lái)我會(huì)一一分析。
第一種,在按鈕上設(shè)置背景
第一種 也是最簡(jiǎn)單的，直接在按鈕上設(shè)置背景，實(shí)現(xiàn)點(diǎn)擊背景的波紋效果。
<Button
android:layout_width="78dp"
android:layout_height="wrap_content"
android:background="@drawable/bg_ripple_selector"
android:text="關(guān)注"
android:layout_margin="13dp" />
對(duì)應(yīng)的背景,注意 ripple標(biāo)簽需要在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,并在按鈕上繪制圓環(huán)擴(kuò)散
第二種的思路也很簡(jiǎn)單,就是一個(gè)繪制圓環(huán)的屬性動(dòng)畫(huà)，結(jié)束后修改文本。
//獲取點(diǎn)擊坐標(biāo)
@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;
}
需要注意的是,圓弧的半徑?jīng)]有確定,本方法中通過(guò) Math.hypot方法計(jì)算
(float) Math.hypot(getMeasuredWidth(), getMeasuredHeight())
開(kāi)始動(dòng)畫(huà)
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) {
//不斷的計(jì)算半徑來(lái)重繪制動(dòng)畫(huà)
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("未關(guān)注");
} else {
setTextColor(Color.BLACK);
setBackgroundColor(Color.WHITE);
setText("關(guān)注");
}
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是在原來(lái)的視圖基礎(chǔ)上做繪制圓環(huán)的變化的。
要想實(shí)現(xiàn)這樣的效果我們起碼得有兩個(gè)view。
拿未關(guān)注-->關(guān)注 這個(gè)過(guò)程來(lái)說(shuō)明。 我們就得有一個(gè)紅底的未關(guān)注的TextView和白底的關(guān)注TextView兩個(gè)view。、
那么點(diǎn)擊按鈕發(fā)生了什么呢？
在這個(gè)過(guò)程中,我們先繪制紅底未關(guān)注的view,之后再這個(gè)基礎(chǔ)上再繪制附加了動(dòng)畫(huà)效果的白底關(guān)注的view。
在展示具體代碼之前,先解釋幾個(gè)api。
drawChild(Canvas canvas, View child, long drawingTime)
drawChild執(zhí)行在onDraw()之后，分別繪制viewGroup中的子view。
canvas.clipPath(Path path,Region.Op op)
//op==Region.Op.INTERSECT 表示表集，本文中使用到的屬性
canvas.clipPath() 根據(jù)op參數(shù),裁剪畫(huà)布。通俗點(diǎn)講,就是展示的view根據(jù)path來(lái)決定，跟你的canvas大小無(wú)關(guān)。(前提是path不大于canvas)
初始化view
private void init() {
mFollowTv = new TextView(getContext());
mFollowTv.setText("關(guān)注");
mFollowTv.setGravity(17);
mFollowTv.setSingleLine();
mFollowTv.setBackgroundColor(Color.WHITE);
mFollowTv.setTextColor(Color.BLACK);
addView(this.mFollowTv);
mUnFollowTv = new TextView(getContext());
mUnFollowTv.setText("未關(guān)注");
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);
}
點(diǎn)擊事件,mIsFollowed用來(lái)標(biāo)記當(dāng)前點(diǎn)擊狀態(tài)
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;
}
動(dòng)畫(huà)相關(guān)代碼,這里注意需要根據(jù)mIsFollowed來(lái)切換mFollowTv和
mUnFollowTv那個(gè)view的展示在最前方(即對(duì)于我們來(lái)說(shuō)最先看到的)
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;
}
//目標(biāo)視圖是白底的關(guān)注視圖,在變化的過(guò)程中,每次都需要繪制紅底的未關(guān)注視圖作為背景使用
if (mIsFollowed && paramView == mUnFollowTv) {
return true;
} else if (!mIsFollowed && paramView == mFollowTv) {
return true;
}
return false;
}
解釋一下drawChild()和drawBackground()流程,還是按照
未關(guān)注-->關(guān)注 這個(gè)變化過(guò)程來(lái)解釋。
觀察文章開(kāi)頭的效果圖,點(diǎn)擊之后，關(guān)注的圓環(huán)一點(diǎn)點(diǎn)擴(kuò)散開(kāi)來(lái)的時(shí)候，未關(guān)注的底圖還是存在的。所以我們每次在調(diào)用drawChild()都會(huì)繪制一次紅底未關(guān)注的view。
if (drawBackground(child)) {
return super.drawChild(canvas, child, drawingTime);
}
if (mIsFollowed && paramView == mUnFollowTv) {
return true;
}
上述這兩段代碼就會(huì)做出判斷,當(dāng)目標(biāo)視圖是關(guān)注,并且當(dāng)前準(zhǔn)備繪制的view是未關(guān)注時(shí),就通過(guò)系統(tǒng)的方法繪制的底圖，不然就執(zhí)行
canvas.clipPath(mPath, Region.Op.INTERSECT);
來(lái)繪制白底關(guān)注的圓環(huán)view。這樣就能實(shí)現(xiàn)文章開(kāi)頭的那個(gè)效果了。.
相關(guān)鏈接
最后貼上代碼地址
