At the beginning

When you see zhihu, there will be an advertising banner at the bottom of the article. When you slide the article up and down, you will switch to the fan sector according to the direction.

Free to write a play, I vegetables chicken, preliminary thinking is two layers of ImageView overlap, the upper level of IV cutting operation, then, directly open lu (demo function demonstration, code may not be beautiful, please forgive me).

layout

General layout

ScrollView content view framelayout/relativelayout can imageView id: iv_below imageView id: iv_above Framelayout/relativelayout can content the viewCopy the code

implementation

We just need to crop iv_above

The bitmap of IV_above is first obtained

bmAbove = ((BitmapDrawable)ivOrange.getDrawable()).getBitmap();
Copy the code

Listen for scrolling:

(in fact is the function of zhihu to after the judgment of sliding direction, directly to the movie, radius of the fan does not have associated with sliding distance, when the sliding direction contrary to the last, to stop the animation last time, and then reverse, the advantage is the least when sliding operation, to avoid the potential sliding caton, I’m just going to relate the fan radius to the slip distance.

    private float screenWidth;
    private float threshold = 500;
        scrollView.setListener(new MyScrollView.onScrollListener() {
            @Override
            public void onScroll(int l, int t, int oldl, int oldt) {
                float curY = (float)t;
                if(t > oldt){
                    //scroll down
                    isScrollUp = false;
                    float r = curY / threshold ;
                    ivOrange.setImageBitmap(circleBitmap(bmOrange, r * screenWidth));
                }else{
                    isScrollUp = true;
                    floatr = curY / threshold ; ivOrange.setImageBitmap(circleBitmap(bmOrange, r * screenWidth)); }}});Copy the code

tailoring

    private Bitmap circleBitmap(Bitmap o,float radius){
        Bitmap outputBm = Bitmap.createBitmap(o.getWidth(),o.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(outputBm);
        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true); Final Rect Rect = new Rect(0,0, o.getwidth (), o.getheight ()); Canvas. DrawARGB (0,0,0,0); Canvas. Methods like drawCircle (0, 0, the radius, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(o,rect,rect,paint);return outputBm;
    }
Copy the code

Using paint.setxferMode, pass in new PorterDuffXfermode to set the composition mode of the 2D image. (.setxfermode is a very complex and powerful method, if you are interested, please go to Baidu.)

In total, there are 18 composition modes:

CLEAR/ SRC/ DST/ SRC_OVER/ DST_OVER SRC_IN/ DST_IN/ SRC_OUT/ DST_OUT/ SRC_ATOP/ DST_ATOP/ XOR/ DARKEN/ LIGHTEN/ MULTIPLY/ SCREEN/ ADD/ OVERLAY/

The composite style is shown below (from the network) :

Here, SRC_IN mode is used, and the clipping effect is achieved by drawing a circle (radius, which increases and decreases), overlapping with the original bmAbove, and returning the intersecting part as a bitmap.

The end of the

So far the whole function is realized, of course, there are a lot of code can be optimized, as well as other ways to achieve, welcome to leave a message together.

The demo address:

[github.com/bladeofgod/…]. (demo address)