仿知乎关注按钮的波纹效果
2018-03-04 本文已影响988人
niknowzcd
恩~~,算了不废话了，直接入主题吧！
这篇文章介绍一个老版知乎关注按钮的波纹动画。
先上效果图
、
一共有三种实现，接下来我会一一分析。
第一种,在按钮上设置背景
第一种 也是最简单的，直接在按钮上设置背景，实现点击背景的波纹效果。
<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。这样就能实现文章开头的那个效果了。.
相关链接
最后贴上代码地址
