先看看效果
2.gif
开源中国的Android客户端的返回按钮就是这样子的，刚开始看的时候感觉好酷，然后就看源码，找着找着发现其实是Android封装好了的一个控件DrawerArrowDrawable，但是这个只是在Android5.0才加入的，于是乎就看了一下这个控件的源码，发现很容易就能抠出来单独用。
当然我也把该控件加入到我的CodeBlog客户端里面了：
mArrowDrawable = new DrawerArrowDrawable(this);
mArrowDrawable.setColor(getResources().getColor(R.color.white));
mTitleBar.setLeftDrawable(mArrowDrawable);
sm.setOnScrollListener(new OnScrollListener() {
@Override
public void onScroll(float percentOpen) {
mArrowDrawable.setProgress(percentOpen);
}
});
对，用起来就是这么简单。其实，这个控件就是需要不断的调用setProgress(percentOpen)来更新绘制的进度，然后在draw(Canvas canvas)方法里面根据percentOpen计算当前应该绘制的位置和图形：
final float rotation = lerp(0, ARROW_HEAD_ANGLE, mProgress * 2 - 1);
final float upStartX = Math.round(mSize/2 * Math.cos(rotation));
final float upStartY = Math.round(mSize/2 * Math.sin(rotation));
// 设置线条起点
mPath.moveTo(mOffsetLeft + mSize/2 - upStartX, mOffsetTop + mSize - upStartY);
// 设置线条需要绘制的dx、dy，也就是在x轴的偏移量和在y轴的偏移量
mPath.rLineTo(2 * upStartX, upStartY * 2);
mPath.moveTo(mOffsetLeft + mSize/2 - upStartX, mOffsetTop + mSize + upStartY);
mPath.rLineTo(2 * upStartX, upStartY * -2);
其中，mProgress为传入的percentOpen值，即进度；ARROW_HEAD_ANGLE为线条旋转最大角度；也就是说，这个类只能用于三杠和图标的切换动作（其实旋转角度及进度的计算是固定的，但是可以设置gap，size等参数实现其他类似的效果，但是变化不会太大），当然这个思路还是可以借鉴的：根据滑动的百分比来同步更新过度控件，其实在微信页面滑动切换时下面tab渐隐渐显的效果也是这个思路，当然还可以衍生出很多其他好玩的东西。更新一个效果：
这个效果就是根据动画更新传过来的插入值来更新mArrowDrawable的状态
alphaAnimator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float)animation.getAnimatedValue();
mArrowDrawable.setProgress(value);
}
});
源码链接：https://github.com/brian512/AndroidDemo
