最近要實現(xiàn)一個類似掃描的效果，效果如下圖匿级，嗯哼～然后要怎么做呢蟋滴？

withclip.gif

首先明確一下需求染厅，效果是要圖中的高光部分從底部到頂部移動,高光部分不能超出圓形背景。

圖是矩形的津函，高光部分只在中間這一部分肖粮，我的第一個想法就是使用位移動畫唄。仔細(xì)一想尔苦，不對啊涩馆。背景是圓的，而移動的圖片是矩形允坚，那矩形的圖在移動的過程中肯定是有一部分超出圓形魂那。如下圖

withoutclip.gif

要不讓UI改圖，改成圓形的稠项。不過仔細(xì)一想又不對啊涯雅，移動的時候，那還是有超出圓形背景的地方展运。哎呀活逆，這就糾結(jié)了。如果移動的高光圖片能自己適應(yīng)圓形的范圍那就好了乐疆，不過還真的可以實現(xiàn)這種效果划乖，萬能的搜索給了我答案，那就是 ClipDrawable挤土。當(dāng)然現(xiàn)在需要的效果就要自定義ClipDrawable了。

ClipDrawable簡介

源碼中對于ClipDrawable的簡介误算，直譯就是一種可以根據(jù)當(dāng)前的等級（level）來裁剪另一個Drawable的Drawable仰美。

A Drawable that clips another Drawable based on this Drawable's current level value. 

ClipDrawable有兩個比較關(guān)鍵的屬性android:gravity和android:clipOrientation隘梨。clipOrientation表示的裁剪的方向，有水平和豎直兩個方向舷嗡。gravity是主要表示內(nèi)部Drawable的位置轴猎，它需要和clipOrientation配合使用才能實現(xiàn)我們想要的效果。gravity的選項比較多进萄，下面簡單說一下捻脖，它們的作用：

上面提到過的level是有范圍的，level的范圍是0～10000典挑，在ClipDrawable中酥宴，0表示的完全裁剪，即整個Drawable都不可見您觉，10000表示不裁剪拙寡。比如我們設(shè)置level為2000，那么會有80%的區(qū)域被裁剪掉了琳水。這個看ClipDrawable源碼中的draw方法就明白了肆糕。MAX_LEVEL就是值是10000

int w = bounds.width();
final int iw = 0; //mState.mDrawable.getIntrinsicWidth();
if ((mState.mOrientation & HORIZONTAL) != 0) {
        w -= (w - iw) * (MAX_LEVEL - level) / MAX_LEVEL;
    }

int h = bounds.height();
final int ih = 0; //mState.mDrawable.getIntrinsicHeight();
if ((mState.mOrientation & VERTICAL) != 0) {
      h -= (h - ih) * (MAX_LEVEL - level) / MAX_LEVEL;
    }

ClipDrawable使用

第一種方式般堆，先在xml文件中定義一個ClipDrawable，ClipDrawable對應(yīng)的標(biāo)簽為<clip\>
在XML文件中诚啃，

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@drawable/image1"
    android:gravity="bottom" />

然后將它設(shè)置給ImageView淮摔，可以作為src，也可以作為background

<ImageView
    android:id="@+id/clip_img"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/clip_drawable"/>

最后在代碼中給ClipDrawable設(shè)置等級

ImageView imageView = (ImageView)findViewById(R.id.clip_img);
ClipDrawable  clipDrawable = (ClipDrawable)imageView.getDrawable();
clipDrawable.setLevel(2000);

第二種方式始赎，我們可以完全在代碼中設(shè)置ClipDrawable,這種方式比較適合自定義的Drawable和橙，因為自定義的Drawable無法在xml文件中使用。
首先在ClipDrawable的構(gòu)造方法中傳入三個參數(shù)造垛，分別是需要被裁剪的Drawable魔招，gravity和裁剪的方向orientation
得到ClipDrawable的對象，接著把它設(shè)置給IamgeView,最后設(shè)置等級level

ClipDrawable clipDrawable = new ClipDrawable(ContextCompat.getDrawable(context, R.drawable.iamge1),
Gravity.BOTTOM, ClipDrawable.VERTICAL);
ImageView imageView = (ImageView)findViewById(R.id.clip_img);
imageView.setImageDrawable(clipDrawable);

自定義ClipDrawable

上面只是ClipDrawable的簡單介紹五辽，使用是很簡單的办斑，但是要實現(xiàn)一些特定的效果的話，自定義Drawable就很必要了奔脐。

下面就來實現(xiàn)文章開頭的例子俄周，
繼承ClipDrawable,主要是重寫draw(Canvas)方法

    Path mRoundPath = new Path();
    @Override
    public void draw(Canvas canvas) {
        //首先得到Drawable的大小，在這里Drawable的大小就是圖片的大小
        Rect bounds = getBounds();
        int width = bounds.width();
        int height = bounds.height();

        //這里Path對象是為了把圖片裁剪成圓形髓迎，這樣圖片在每一次setLevel后峦朗，都能在圓形背景的范圍中
        mRoundPath.reset();
        mRoundPath.addCircle(width/2, height/2, width/ 2, Path.Direction.CW);
        canvas.save();
        canvas.clipPath(mRoundPath);
        //得到當(dāng)前的level，移動畫布排龄，實現(xiàn)向上移動的效果波势。
        int level = getLevel();
//裁剪的同時，不斷移動畫布橄维，剛開始把高光的圖標(biāo)向下移動height/2,這樣就看不到高光部分了尺铣，因為圖是剛開始是在圓圈的中間
        canvas.translate(0,  height/2 - (level / 10000f) * (3*height/2 ));
        //記得要調(diào)用父類的draw方法，里面是真正實現(xiàn)裁剪的實現(xiàn)争舞，看源碼可知Drawable高度和寬度的變化是在里面改變的凛忿，即裁剪寬度或高度。
        //上面的mRoundPath裁剪是讓內(nèi)部的Drawable在移動的過程始終是在背景圖片的范圍內(nèi)竞川，即裁剪Drawable為圓形
        super.draw(canvas);
        canvas.restore();
    }

從super.draw(canvas)進入到源碼中店溢，可以看到如下代碼

 @Override
    public void draw(Canvas canvas) {
        final Drawable dr = getDrawable();
        if (dr.getLevel() == 0) {
            return;
        }

        final Rect r = mTmpRect;
        final Rect bounds = getBounds();
        final int level = getLevel();//這里就是得到設(shè)置的level

        int w = bounds.width();//drawable的實際寬度
        final int iw = 0; //mState.mDrawable.getIntrinsicWidth();
        if ((mState.mOrientation & HORIZONTAL) != 0) {
//根據(jù)level的值計算得到裁剪后的寬度
            w -= (w - iw) * (MAX_LEVEL - level) / MAX_LEVEL;
        }

        int h = bounds.height();//drawable的實際高度
        final int ih = 0; //mState.mDrawable.getIntrinsicHeight();
        if ((mState.mOrientation & VERTICAL) != 0) {
//根據(jù)level的值計算得到裁剪后的高度
            h -= (h - ih) * (MAX_LEVEL - level) / MAX_LEVEL;
        }

        final int layoutDirection = getLayoutDirection();
        Gravity.apply(mState.mGravity, w, h, bounds, r, layoutDirection);

        if (w > 0 && h > 0) {
            canvas.save();
            canvas.clipRect(r);//這里就是裁剪的地方
            dr.draw(canvas);//然后就畫在畫布上，顯示出裁剪后的圖片了
            canvas.restore();
        }
    }

最后

最后貼出MainActivity的代碼委乌，利用一個Runnable實現(xiàn)level的更新

public class MainActivity extends AppCompatActivity {

    private ImageView mImage;
    private ClipDrawable mClip;

    private int mTime = 0;
    int mClipLevel = 0;
    private Runnable mClipRunnable = new Runnable() {
        @Override
        public void run() {
            if(mTime == 1){
                return;
            }

            if(mClipLevel >= 10000){
                mTime++;
            }

            mClipLevel += 100;
            mClip.setLevel(mClipLevel);
            mImage.postDelayed(mClipRunnable, 50);
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btnAgain = findViewById(R.id.btn_again);
        btnAgain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mImage.removeCallbacks(mClipRunnable);
                mTime = 0;
                mClipLevel = 0;
                mImage.post(mClipRunnable);
            }
        });
        mImage = findViewById(R.id.iv_image);
        mClip = new RoundClipDrawable(ContextCompat.getDrawable(this, R.drawable.clip_src),
                Gravity.BOTTOM,ClipDrawable.VERTICAL);
        mImage.setImageDrawable(mClip);
        mImage.postDelayed(mClipRunnable, 500);
    }
}