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

This article mainly shows you "how to customize the loading animation in Android development", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to customize the loading animation in Android development" this article.

A brief introduction to demo

1. The effect is shown in the following picture, I cut off three moments, but in fact this is a continuous animation, that is, the big circle keeps swallowing the small circle.

two。 The animation can be divided into two parts. the first is the animation of a big circle opening and shutting up, which is equivalent to drawing an arc and defining its angle. A small circle is an animation that moves from right to left. Then constantly refresh the interface so that the duration of the animation is eternal, so that there will be a continuous dynamic effect.

Second, analyze the size proportion of gluttony animation

1. Before making animation, we need to build a model to determine the ratio of big circle to small circle. This ratio is set by yourself and can be modified by yourself. The following picture shows a situation where the width of the canvas is greater than the height.

R = minHeight / 6

Cx = (width-minwidth) / 2 + 3R

Cy = height/2

There is also a situation where the width of the canvas is less than the height, as shown in the following figure: at this time

6R+0.5R+2R = minwidth. R = minwidth / 8.5

Cx = 3R

Cy = height/2

two。 After determining the center coordinates of the large circle, the center coordinates of the small circle can also be known.

Draw a circle

1. First create a class that inherits from view and implement its corresponding constructor

Class MouseLoadingView: View {constructor (context: Context): super (context) {} constructor (context: Context,attrs:AttributeSet?): super (context,attrs) {} constructor (context: Context,attrs:AttributeSet?,style:Int): super (context,attrs,style) {}}

two。 Define the radius of the big circle (mouth) (3R), the radius of the small circle (R) and the distance between the two circles (0.5R), as well as the center coordinates of the mouth.

/ / the radius of the mouth private var mouseRadius = 0f / / the radius of the small circle private var ballRadius = 0f / / the distance between the mouth and the ball private var space = 0f / / the center of the mouth private var cx = 0f private var cy = 0f

3. Calculate the size in the onSizeChanged method.

Override fun onSizeChanged (w: Int, h: Int, oldw: Int, oldh: Int) {if (measuredWidth > = measuredHeight) {ballRadius= measuredHeight/6f cx = (measuredWidth-8.5f*ballRadius) / 2 + 3*ballRadius} else {ballRadius= measuredWidth/8.5f cx = 3*ballRadius.toFloat ()} mouseRadius = 3*ballRadius space = ballRadius/2f cy = measuredHeight/2f}

4. One brush available

/ / Brush privateval mPaint = Paint (). Apply {style = Paint.Style.FILL color = context.resources.getColor (R.color.colorAccentjie null)}

5. Draw a circle in the onDraw method

Override fun onDraw (canvas: Canvas?) {canvas?.drawCircle (cx,cy,mouseRadius,mPaint)}

6. Add this custom class to the xml file

7. If you use the above method to draw a circle, there will be some bug, as shown in the following figure

This is because when the width is greater than the height, R = height/6. If R is too small, then the coordinates of the center of the circle will be to the left, then some circles will be out of bounds. To avoid this, set R to the smallest / 8.5 in any case.

8. Recalculate the radius

Override fun onSizeChanged (w: Int, h: Int, oldw: Int, oldh: Int) {super.onSizeChanged (w, h, oldw, oldh) / / calculate the size / / the radius of the ball (Math.min (measuredHeight) MeasuredWidth) / 8.5f). Also {r-> ballRadius = r / / the radius of the mouth mouseRadius = 3mm r / / the distance between the mouth and the ball space = the center of the mouth 2 / / the center of the mouth cx = ((measuredWidth- 8.5r) / 2 + 3cm r). ToFloat () cy = measuredHeight/2f}} 4, Realize the animation of opening and shutting up.

1. Opening your mouth is equivalent to drawing an arc, and you need to determine a rectangular area-that is, the rectangle where the great circle is located. You also need to set an angle, that is, radians. Draw it as shown in the following illustration.

Override fun onDraw (canvas: Canvas?) {canvas?.drawArc (cx-mouseRadius, cy-mouseRadius, cx+mouseRadius, cy+mouseRadius, 45f

Image.png

two。 This is a static process, and if you want to make it dynamic, you just need to change the angle of the mouth all the time. So we define an animation factor as radians.

/ / the angle of mouth opening-> the animation factor of mouth opening private var mouseAngle = 0f

3. Then in the onDraw method, change the dead data to our animation factor.

Canvas?.drawArc (cx-mouseRadius, cy-mouseRadius, cx+mouseRadius, cy+mouseRadius, mouseAngle,360-2 authentic MouseAngle)

4. Add two buttons to display and pause the animation. When the button is clicked, the corresponding click event is realized.

5. So in the MouseLoadingView class, several methods are provided for external calls

} / / for external use / / display animation fun show () {createAnimator () start ()} / / hide animation fun hide () {stop ()}

6.createAnimator () is a function that creates an animation. From 0-45-0 is the change of animation factor, monitor the animation execution process, constantly refresh the value of animation factor, and then refresh the interface.

Private fun createAnimator () {ValueAnimator.ofFloat (0f, 45f, 0f). Apply {duration = 650repeatCount = ValueAnimator.INFINITE addUpdateListener {mouseAngle = it.animatedValue as Float / / refresh interface invalidate ()} animators.add (this)}}

7. Because there are so many animations, we have to use an array to save all the animations.

/ / Save all animated objects private var animators = mutableListOf ()

8. Add several ways to start and end animation

/ / start animation private fun start () {for (anim in animators) {anim.start ()} / / pause animation private fun stop () {for (anim in animators) {anim.end ()} 5. Ball movement animation

1. Create a small ball and let it move from right to left. The x-coordinate of the center of the ball is constantly changing, and the y-coordinate is the same as the big circle. So we need to set a moving animation factor for the ball.

/ / the animation factor of ball movement private var ballTranslateX = 0f

two。 Then draw the ball in the onDraw () method

/ / draw the ball canvas?.drawCircle (cx+ballTranslateX,cy,ballRadius,mPaint)

3. After that, add the animation of the ball to the createAnimator () method. Let the ball move from 4.5R to 0, that is, until the small circle coincides with the big circle.

ValueAnimator.ofFloat (4.5f*ballRadius, 0f). Apply {duration = 650 repeatCount = ValueAnimator.INFINITE addUpdateListener {ballTranslateX = it.animatedValue as Float / / refresh interface invalidate ()} animators.add (this)}

4. Add button click events in MainActivity

Class MainActivity: AppCompatActivity () {override fun onCreate (savedInstanceState: Bundle?) {super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) startBtn.setOnClickListener {loadingView.show () pauseView.show ()} stopBtn.setOnClickListener {loadingView.hide () pauseView.hide ()}

That's about it. The difficulty of custom loading animation is to find animation factors.

The above is all the contents of the article "how to customize loading Animation in Android Development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.