Android Custom Recording, play animated view, let your recording wave up

Recently the company project has a recording and playback animation needs, then the time is so tight, then hurriedly open.

Look first.

Well, then basically, hold the recording, and then there's a countdown, a progress bar on the outermost layer, and an animated effect like a simulated sonic (in fact, the middle wave will wave up depending on the size of the sound)

2

Implementation ideas

Then, we will properly analyze how this recording animation is implemented. This is definitely a custom control, so let's get this effect completely drawn.

The following points are roughly included:

1. The outermost progress bar, the most pits is the beginning of a gradient effect
2. Then the progress bar at the front is a point (I certainly choose to use the picture to achieve)
3. The middle wave (the key is to go with the sound of the size of the wave up)
4. Countdown in the Middle

3

Implementation process

1. Draw the outermost circle

2. Draw the text of the hint

3. Draw the countdown (stationary time)

4. Draw Sound waves

This code will not unfold, painting a bit annoying, simple, but also need to experience ha. The white line before the above divider is to let the sound wave move, that is, change the value of the volume, and then there are 3 for loops.

The first for loop is to determine the position of the sonic horizontal line, the second is to draw a sound wave, and the third is the color gradient.

5. The point of drawing the outer ring progress

Let's start with a graph analysis, like. A point is the starting coordinates, the beginning of our small dot is hidden, if not counted padding words, x=witdh/2,y=0;

Well, then, we're using a picture.

canvas.drawBitmap(......);

So, you know, Drawbitmap () This method of painting is the top left corner of our picture to draw to a point, in fact, we should move to the upper left corner, in order to make the center of the real meaning of the image and a point coincident, right, ah, think carefully.

Then continue to look at the graph above, and when we move to point B over time, we have to figure out the coordinates of Point B.

This way to use the trigonometric functions, we set A to B, turn the angle of α, set the radius of the circle R, then a to B in fact, the distance between the horizontal increase should be

m = x+r*sin(α);n = y+r*cos(α);

So all our code for the picture is:

6. Draw outside with progress and a large circle with a gradient

My implementation is very simple, from our UI diagram, the outside of the great circle in the 1/4 progress of the time is gradient, and then the remaining 3/4 is actually a color, right, then I will draw 2 circles to achieve this effect.

When the progress<90, we draw the gradient of the ring, when >90, we also draw the gradient and the solid color of the ring (when the progress, this time in fact, the gradient of the ring has not changed, but the solid color of the ring has been changing).

A is the gradient ring, B is the solid color of the ring

7. And then there's the last timer, and the progress that's always there.

8. Finally, provide various interfaces, various drawing and start-up mechanism, the most important is the above method of drawing.

For example, your custom attribute

And all the rest of the custom view, the students who are not familiar with the custom view can first learn how to customize the view (it is very simple, not afraid of the novice), and then to achieve some look good results.

Summary

Well, basically this, for the company these animation needs I just want to say that you want to do, are no problem, the most important is the time! In fact, the last time left to developers is not much, and then if you want to add a variety of animation, it is not the rhythm of overtime every day ~

：Https://github.com/Blincheng/RecordView

Android Custom Recording, play animated view, let your recording wave up