The implementation of the fill effect of the app drop-down refresh icon in mu lesson net

Before you see a drop-down refresh effect, unlike the previous drop-down effect, most of the drop-down refreshes are a circular progress bar in the rotation, and this pull-down refresh is a continuously filled effect. I thought this is a custom view, and then the anti-compilation web app after the extraction of resources to see a lot of pictures, that probably MU net app inside the implementation should be frame animation to achieve this effect. And when I see this effect, the instinctive response is customized because I was learning the custom control a while ago. First of all, we look at the effect of Mu-class net. Such as

And mine also implements a simple version of this icon fill. Such as

The entire implementation uses the graph's blending mode + Bezier curve, and the Bezier curve is drawn as reference to the blog Bezier content of the cousin

The resource file only has the following icon, which is extracted from the Web app and then transparently processed by the internal flame.

Since it is a custom view, it is necessary to inherit the view, implement Ondraw,onmeasure and so on, for the sake of simplicity, here the width of the control is directly set to the width and height of the picture, Instead of implementing the corresponding logic to determine which measurespec pattern is to be processed.

Post Code First

Package Cn.edu.zafu.view;import Android.content.context;import Android.graphics.bitmap;import Android.graphics.bitmap.config;import Android.graphics.bitmapfactory;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.path;import Android.graphics.porterduff;import Android.graphics.porterduffxfermode;import Android.util.AttributeSet;import android.view.view;/** * @author lizhangqu * * 2015-3-5 */public class CustomView extends View {private Porterduffxfermode Porterduffxfermode;//xfermodeprivate Paint paint;private Bitmap bitmap;//source picture private final int RED = 0xc9394a;// Dark red private int width, height;//control wide height private Path path;//draw Bezier curve need to use private canvas mcanvas;//to draw the target picture on the canvas private Bitmap BG ;//target Picture private float CONTROLX, controly;//Bezier control point, using Sanche Besel curve curve, requires two control points, two control points are generated on the basis of the variable private float wavey;// The rising height of the private Boolean isincrease;//is used for controlling control points horizontally moving public customview (context context) {This (context, null);} Public CustomView (context context, ATTRibuteset attrs) {This (context, attrs, 0);} Public CustomView (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, defstyle); init ();} private void Init () {//Initialize brush paint = new Paint ();p Aint.setantialias (True);p Aint.setdither (True);p Aint.setstyle ( Paint.Style.FILL);p Aint.setcolor (Color.parsecolor ("#ffc9394a"));//get resource file Bitmap = Bitmapfactory.decoderesource ( Getresources (), R.DRAWABLE.MOOC);//Set width high for picture width = bitmap.getwidth (); height = bitmap.getheight ();//initial state value Wavey = 7/ 8F * Height;controly = 17/16f * height;//initialization xfermodeporterduffxfermode = new Porterduffxfermode (PorterDuff.Mode.SRC_IN) ;//Initialize Pathpath = new Path ();//Initialize canvas Mcanvas = new canvas ();//Create BITMAPBG = Bitmap.createbitmap (width, height, config.argb_ 8888)//inject the new bitmap into the canvas mcanvas.setbitmap (BG);} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas);d rawtargetbitmap ();//Draw the target graph, Exists BG on canvas.drawbitmap (BG, 0, 0, NULL);//Draw the target graph on the current canvas invalidate ();//redraw, here for the convenience of viewing the effect, you can use the thread to control this part of the Code}private Void Drawtargetbitmap() {path.reset ();//Reset Pathbg.erasecolor (Color.parsecolor ("#00ffffff")),//erase pixels//Change the identity value if the x-coordinate of the control point is greater than or equal to the endpoint x-coordinate if ( Controlx >= Width + * width) {isincrease = false;} Change the identity value if the X coordinate of the control point is less than or equal to the start X coordinate (Controlx <= -1/2 * width) {isincrease = true;} Determines whether the current control point x-coordinate is the plus or minus CONTROLX = Isincrease based on the identity value? Controlx + 10:controlx-10;if (controly >= 0) {//wave up controly-= 1;wavey-= 1;} else {//out reset Position Wavey = 7/8f * He Ight;controly = 17/16f * height;} Bezier Curve Generation Path.moveto (0, Wavey);p ath.cubicto (CONTROLX/2, Wavey-(Controly-wavey), (Controlx + width)/2, Controly, WI DTH, Wavey);p ath.lineto (width, height);p ath.lineto (0, height);//To close the Path.close ();//To Draw Bézier curve code refer to my Brother's blog//http Blog.csdn.net/aigestudio/article/details/41960507mcanvas.drawbitmap (bitmap, 0, 0, paint);// Painting Mu class net Logopaint.setxfermode (Porterduffxfermode);//Set Xfermodemcanvas.drawpath (path, paint);// Draw Sanche Besel curve paint.setxfermode (null);//Reset Xfermode} @Overrideprotected void onmeasure (int widthmeasurespec, int Heightmeasurespec) {setmeasureddimension (Measurespec.makemeasurespec (width, measurespec.exactly), Measurespec.makemeasurespec ( Height, measurespec.exactly));//Set Altitude section is the logo width and height, the actual development should judge the Measurespec mode, the corresponding logic processing}}

The entire implementation process is relatively simple, basically the comments are very clear, here is no longer repeated, the article refers to the two points of knowledge (graphics mixed mode and Bezier curve) of the relevant content reference the following two articles

Graphics Blending mode http://blog.csdn.net/aigestudio/article/details/41316141

Bezier Curve http://blog.csdn.net/aigestudio/article/details/41960507

All are love elder brother's article, the individual thought writes very fine.

The implementation of the fill effect of the app drop-down refresh icon in mu lesson net