RippleEffect Principle Analysis, rippleeffect Analysis

RippleEffect Principle Analysis, rippleeffect Analysis

Let's take a look at the specific implementation process of RippleEffect. First, write down your experiences and share them with you...

RippleEffect is to click View, and the previous circle on the View gradually grows, and then disappears...

Original effect:

My Demo results:

Principle: rewrite the ViewonDraw(Canvas canvas)Method, and then usecanvas.drawCircle(x, y, currentRadius, paint)By constantly changing the value of currentRadius, we can change it from small to large to achieve this effect.

(1) define variables:

/*** Minimum to maximum length of a circle */private int DURATION = 2000;/*** maximum radius of the circle to be drawn */private float radiusMax = 0; /* ** maximum View WIDTH */private int WIDTH;/* maximum View HEIGHT */private int HEIGHT; /*** record the x coordinates of the finger points */private float x;/*** record the y coordinates of the finger points */private float y; /*** increase the timer's amplification factor */private int FRAME_RATE = 10;/*** use timer's non-stop timer ++, achieve the effect of increasing the circle */private int timer = 0;/*** Handler used to update the interface */private Handler canvasHandler; /*** whether the animation is being played */private boolean animationRunning = false;/***** Paint brush */private paint Paint; /*** use Handler to refresh the task on the current interface */private final Runnable runnable = new Runnable () {@ Override public void run () {invalidate ();}};

(2) rewriteprotected void onSizeChanged(int w, int h, int oldw, int oldh)The height and width of the View are displayed.

@Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        Log.d("K", "onSizeChanged,w:" + w + ", h: " + h);        WIDTH = w;        HEIGHT = h;    }

(3) In the constructor, We need to initialize our paint brush to refresh the Handler of the interface.

/*** Initialize the paint brush, Handler * @ param context */private void init (Context context) {Paint = new paint (); paint. setAntiAlias (true); paint. setStyle (Paint. style. FILL); paint. setColor (getResources (). getColor (android. r. color. white); canvasHandler = new Handler ();}

(4) imagine that when we click View by hand, a gradually enlarged circle appears at the clicked position, so we must rewrite it.public boolean onTouchEvent(MotionEvent event)Method, and then record the (x, y) coordinates we click, and take the (x, y) position as the center of the circle, draw a circle with the appropriate radius, OK.

(4-1) rewriteonTouchEvent(MotionEvent event)Method to respond to user touch screen events.

@Overridepublic boolean onTouchEvent(MotionEvent event) {    animateRipple(event);    return super.onTouchEvent(event);}

(4-2) WriteanimateRippleFunction. When an animation is not played, the animation is played, that is, the circle.

/*** Start to circle * @ param event */public void animateRipple (MotionEvent event) {// if no animation is currently played, perform these assignment operations if (! AnimationRunning) {radiusMax = Math. max (WIDTH, HEIGHT); Log. d ("K", "radius:" + radiusMax); this. x = event. getX (); this. y = event. getY (); animationRunning = true; invalidate ();}}

This function is mainly used to setanimationRunningThis variable is used to indicate whether an animation is currently being played. Then we determine that the maximum radius of the circle we want to draw is the maximum width and height of the mobile phone.

(4-3) Next we need to compile our core functions.onDraw(Canvas canvas)Now,

@ Overrideprotected void onDraw (Canvas canvas) {super. onDraw (canvas); if (animationRunning) {if (DURATION <= timer * FRAME_RATE) {animationRunning = false; timer = 0; canvas. restore (); Log. d ("K", "animation end. "); return;} else {// refresh canvasHandler every FRAME_RATE. postDelayed (runnable, FRAME_RATE);} if (timer = 0) {canvas. save ();} float currentRadius = radiusMax * (float) timer * FRAME_RATE)/DURATION); Log. d ("K", "current radius:" + currentRadius); canvas. drawCircle (x, y, (currentRadius), paint); timer ++ ;}}

In the onDraw function, the most important thing to do iscanvas.drawCircle(x, y, (currentRadius), paint);This is our core code, which shows the circle we want to draw. SocurrentRadiusWhat does it rely on to change? The answer istimerVariable, we know that every callinvalidate(),onDrawThe function will be called once, so we can use the onDraw function to accumulate timer to simulate the increasing radius.DURATIONIs the total duration,FRAME_RATEEquivalenttimerA amplification factor,FRAME_RATE * timerMust be greaterDURATIONWhen, we willcanvas.restore()Restore the scene and return to the scene before the circle is drawn, that is, the circle disappears.

[Source code]

[This blog will continue to focus on the core principles of various open-source Android components. You are welcome to repost this article ~ If you do not understand, simply comment and reply]