Shulou(Shulou.com)06/03 Report--

This article mainly introduces Android how to achieve Meituan takeout bottom navigation bar animation, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

After experiencing the bottom navigation bar of Meituan takeout, I felt that the animation was very smooth, the split line was pushed up, and the animation of the icon, which may be lottie, was used. I felt that the split line could write my own animation, so I tried to write it.

To customize the view click to achieve animation, the area of the custom view must be higher than the line that the background needs to be pushed up, so the layout is as follows:

Start to draw view, the curve is divided into three segments, the front and rear ends of the curve are symmetrical, using path to draw the curve, the middle section to draw the Bezier curve.

So let's draw three curves respectively and use ValueAnimator to achieve the effect.

Private void initAnim () {value = startValue; animator = ValueAnimator.ofInt (startValue, halfValue, endValue); / / animator.setInterpolator (new DecelerateInterpolator ()); animator.addUpdateListener (new ValueAnimator.AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator valueAnimator) {value = (int) valueAnimator.getAnimatedValue (); invalidate ();}}); animator.setDuration (ANIM_TIME); animator.start ();}

If there is a rebound during the execution of the animation, then the change of value requires an intermediate value.

StartValue = 0pershalfValue =-DensityUtils.dp2px (context, 35); endValue =-DensityUtils.dp2px (context, 25)

The code for drawing the curve in onDraw is as follows

RectF = new RectF (float) width-(float) contentSize) / 2), lineToTop + value, (float) width-((float) width-(float) contentSize) / 2, height + value); if (value < 0) {Path path = new Path (); / / draw the first arc path.moveTo (rectF.left-20, lineToTop); float firstCubicHight = (float) lineToTop-rectF.top) / 4; float end = (float) lineToTop-firstCubicHight Path.cubicTo (rectF.left-10, (float) lineToTop-firstCubicHight / 16, rectF.left, (float) lineToTop-firstCubicHight / 12, rectF.left + 10, end); / / draw the second arc path.quadTo (rectF.left + contentSize / 2, rectF.top * 0.9f, rectF.right-10, end) / / draw the third arc and the first symmetrical path.cubicTo (rectF.right, (float) lineToTop-firstCubicHight / 12, rectF.right + 10, (float) lineToTop-firstCubicHight / 16, rectF.right + 20, lineToTop); Path pathBg = new Path (); pathBg.addPath (path); pathBg.lineTo (rectF.right + 20, height); pathBg.lineTo (rectF.left-20, height); pathBg.lineTo (rectF.left-20, lineToTop); canvas.drawPath (pathBg, paintBg) / / draw white background canvas.drawPath (path, paintBgStroke); / / draw curve}

Finally, it is successful to draw a picture in onDraw () and move it with attribute animation.

Thank you for reading this article carefully. I hope the article "how to realize the Animation of the Navigation Bar at the bottom of Meituan takeout" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.