Canvas综合实战——沙漏

Canvas其实在前面的几篇博客中都有过使用，但这些使用一般集中在绘制和画布变化方面，画布的快照和裁剪应用很少。下面通过一个沙漏实例演示下这两部分的使用
效果图：

说是沙漏确实有点勉强.没有美工支持，只好从老项目里扒出来两张不同颜色填充的颜色来应付。重在实现过程，希望有强迫症的同学能够理解一下哈。

主要实现过程分为两部分
1. 自定义一个Drawable，实现两张图片的拼接。
2. 利用属性动画更新Drawable的level。

自定义Drawable

这部分不仅需要Canvas的相关知识，还需要对Drawable有一定的了解。合理利用Drawable的level属性，监听其值变化进行重绘。

Canvas的相关操作

    @Override
    public void draw(Canvas canvas) {
        //获得level
        mCurrentLevel = getLevel();
        //level为0设置画未选择图片
        if (0 == mCurrentLevel) {
            mUnselectedDrawable.draw(canvas);
        } else if (10000 == mCurrentLevel) {
            //level为最大值则显示选择图片
            mSelectedDrawable.draw(canvas);
        } else {
           /* 根据level大小对画布进行裁剪，设置不同图片*/

            //获得画布的上半部分
            Gravity.apply(Gravity.TOP, mBounds.width(), (int) (mBounds.height() * (mCurrentLevel / (10000f))), mBounds, mClipRect);
            //先保存画布
            canvas.save();
            //裁剪出上半部分
            canvas.clipRect(mClipRect);
            //画未选择图片，因为画布只有一半，所以只能显示一半
            mUnselectedDrawable.draw(canvas);
            //恢复画布，将其恢复到原来大小
            canvas.restore();
            //获得画布的下半部分
            Gravity.apply(Gravity.BOTTOM, mBounds.width(), (int) (mBounds.height() * (1 - mCurrentLevel / (10000f))), mBounds, mClipRect);
            //保存画布
            canvas.save();
            //裁剪出下半部分
            canvas.clipRect(mClipRect);
            //画选择图片，因为只有下半部分，所以只有显示一半
            mSelectedDrawable.draw(canvas);
            //恢复画布
            canvas.restore();

        }
    }

构造函数

    /***
     * 构造函数
     * @param unselect 未选择图片（灰色五角星）
     * @param select 选择的图片（黄色五角星）
     */
    public JoinDrawable(Drawable unselect, Drawable select) {
        mUnselectedDrawable = unselect;
        mSelectedDrawable = select;
    }

    /***
     * 构造函数
     * @param context 上下文
     * @param unselectId 未选择图片ID（灰色五角星）
     * @param selectId 选择的图片ID（黄色五角星）
     */
    public JoinDrawable(Context context, int unselectId, int selectId) {
        mUnselectedDrawable = context.getResources().getDrawable(unselectId);
        mSelectedDrawable = context.getResources().getDrawable(selectId);
    }

其它设置

    @Override
    protected void onBoundsChange(Rect bounds) {
        mBounds = bounds;
        mUnselectedDrawable.setBounds(bounds);
        mSelectedDrawable.setBounds(bounds);
    }

    @Override
    public int getIntrinsicWidth() {
        return Math.max(mSelectedDrawable.getIntrinsicWidth(),
                mUnselectedDrawable.getIntrinsicWidth());
    }

    @Override
    public int getIntrinsicHeight() {
        return Math.max(mSelectedDrawable.getIntrinsicHeight(),
                mUnselectedDrawable.getIntrinsicHeight());
    }

    @Override
    protected boolean onLevelChange(int level) {
        invalidateSelf();//通知重新绘制
        return true;
    }


    @Override
    public int getOpacity() {
        return PixelFormat.UNKNOWN;
    }

属性动画

属性动画的使用比较常规，只需要动态改变下Drawable的层级就行，需要注意的是level的最大值为10000.代码如下：

    /**
     * 开启动画
     */
    public void startAnimator() {
        ValueAnimator mAnimator = ValueAnimator.ofFloat(0, 1);
        mAnimator.setDuration(2000);
        mAnimator.setInterpolator(new LinearInterpolator());
        mAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mJoinDrawable.setLevel((int) (animation.getAnimatedFraction() * 10000));
            }
        });
        mAnimator.start();

    }

调用过程

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mImg = findViewById(R.id.join_img);
        mJoinDrawable = new JoinDrawable(this, R.mipmap.unselect, R.mipmap.select);
        mImg.setImageDrawable(mJoinDrawable);
        startAnimator();

    }

项目地址