A cool Loading animation - load failure

Label animationAndroidProgress barLoading
13267 people read comment(11) Collection report

brief introduction

Last articleA cool Loading animation - loaded successfully, give you a successful animation of the drawing process, this article will then introduce the production of the effect of loading the failure.
Compared to successful animation, with the previous experience, the failure of the animation process is relatively simple.

Animation structure analysis

First of all, we look at a map of the failure of the animation:
Write the picture here.
The state transition of the failed animation is described as follows:

1, loading process, draw the blue circle, when the progress is 100%, the ring is completed
2, from the right side out of blue square, square along the curve to ringRight upper
3 small squares, suddenly disappeared,Red exclamation markappear
4, after the full exclamation point, the ring becomes red, exclamation markshock

Because the first two processes, and the load is the same as the success, so we mainly look at theProcess 3,4.

Red exclamation gradually appear

"gradually", there are two words, we should know that this is an animation effect.
The exclamation mark is divided into two paths, the longer and shorter, and the rest of the work is that we will gradually draw the path out. This train of thought and beforeGreen hookAnd other drawing is the same.
We needA timer, two path Path, and the corresponding PathMeasure.

Here we combine the code to say more clearly, the path is like this:

        Exclamation / / path
CommaPath1 Path =NewPath ();
CommaPath2 Path =NewPath ();
CommaPath1.moveTo (2F* radius+strokeWidth,1.25f* radius+strokeWidth);
CommaPath1.lineTo (2F* radius+strokeWidth,2.25f* radius+strokeWidth);
CommaPath2.moveTo (2F* radius+strokeWidth,2.75f* radius+strokeWidth);
CommaPath2.lineTo (2F* radius+strokeWidth,2.5f* radius+strokeWidth);
CommaPathMeasure1 =NewPathMeasure (commaPath1,False);
CommaPathMeasure2 =NewPathMeasure (commaPath2,False);

Timer is simple, is aValueAnimator

        Exclamation / / Animation
MCommaAnimation = ValueAnimator.ofFloat (ZeroF,OneF);
MCommaAnimation.setDuration (Five hundred);
MCommaAnimation.setInterpolator (NewAccelerateInterpolator ());
MCommaAnimation.addUpdateListener (NewValueAnimator.AnimatorUpdateListener () {

            Public Void OnAnimationUpdate(animation ValueAnimator) {
CommaPrecent = (=.Float() animation.getAnimatedValue ();
Invalidate ();

Finally, using PathMeasure to calculate the part of the path, you can gradually draw the full path

    / * *
* draw an exclamation mark
* /
    Private Void DrawComma(canvas Canvas) {
Path1 Path =NewPath ();
CommaPathMeasure1.getSegment (Zero, commaPrecent * commaPathMeasure1.getLength (), path1,True);
Path1.rLineTo (Zero,Zero);
Path2 Path =NewPath ();
CommaPathMeasure2.getSegment (Zero, commaPrecent * commaPathMeasure2.getLength (), path2,True);
Path2.rLineTo (Zero,Zero);
Canvas.drawPath (path1, commaPaint);/ / longer
Canvas.drawPath (path2, commaPaint);/ / short
Canvas.drawArc (mRectF,Zero,Three hundred and sixty,FalseCommaPaint);/ / red ring

Red exclamation mark

How to achieve the effect of vibration, my idea is thatRotate canvas!
Careful observation of vibration effect, will find that the process is like this:

Offset to the left - "back to the middle -" - to the right - back to the middle - "to the left -"...

This means that the shock is actually a rapid shift process, but to offset a certain point of view, and then draw an exclamation point will be more trouble. I want to come out of the way, that isShift the canvas instead of the exclamation point..
So our timer is like this:

        / / motion animation
MshockAnimation = ValueAnimator.ofInt (-One,Zero,One,Zero-.One,Zero,One,Zero);
MshockAnimation.setDuration (One thousand);

MshockAnimation.setInterpolator (NewLinearInterpolator ());
MshockAnimation.addUpdateListener (NewValueAnimator.AnimatorUpdateListener () {
            Public Void OnAnimationUpdate(animation ValueAnimator) {
ShockPrecent = (=.Int() animation.getAnimatedValue ();
Invalidate ();


If it is -1, the canvas on the left rotation of 30 degrees, 0 will not rotate, 1 on the right to rotate 30 degrees.

/ * *
* draw vibration effect
* /
    Private Void DrawShockComma(canvas Canvas) {
Path1 Path =NewPath ();
CommaPathMeasure1.getSegment (Zero, commaPathMeasure1.getLength (), path1,True);
Path1.rLineTo (Zero,Zero);
Path2 Path =NewPath ();
CommaPathMeasure2.getSegment (Zero, commaPathMeasure2.getLength (), path2,True);
Path2.rLineTo (Zero,Zero);

        IfShockPrecent! =.Zero{) ();
Canvas.rotate (shockDir,Two* radius,Two* radius);
            Else If(shockPrecent==-One)
Canvas.rotate (-shockDir,Two* radius,Two* radius);
Canvas.drawPath (path1, commaPaint);
Canvas.drawPath (path2, commaPaint);
Canvas.drawArc (mRectF,Zero,Three hundred and sixty,FalseCommaPaint);
        IfShockPrecent! =.Zero{)
Canvas.restore ();

Which note, () method and canvas.restore () method must be used in pairs, and then we call canvas.rotate () method, you can rotate the canvas.
Write the picture here.

Write in the end

With previous experience, failure animation actually is old wine in new bottles, using canvas rotation to achieve vibration. This idea is more interesting.
For API is not familiar with friends, it is recommended to use the time to check the official documents, or look at some of the other friends of the introduction of the basis of the article.
Finally, provideSource download addressandGitHub address, welcome everyone to download and star.

step on
Guess you're looking for
View comments
* the above user comments only represent their personal views, does not represent the views or position of the CSDN website
    personal data
    • Visit179547 times
    • Integral:Six thousand two hundred and thirty-eight
    • Grade
    • Rank:2094th name
    • Original439
    • Reproduced:34
    • Translation:15
    • Comments:134
    Blog column
    Latest comments