Draw a Path as animation on canvas

Question

I have to ask again because no one answered my question before (my problem is NOT a duplicate of How to draw a path on an Android canvas with animation?). Please read it carefully and help me, if possible by providing code. The abouve example is unclear for me, and the Path is created on the flow of drawing. This is NOT what I am looking for...

I want to draw ONE Path, that already exist in my View class, by drawing its points with time interval, to simulate an animation. How should I modify my onDraw class to archive it?

public void onDraw(Canvas canvas) { 

paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(6);
paint.setColor(Color.parseColor("#10BCC9"));
if(path != null && !path.isEmpty())
    canvas.drawPath(path, paint);

}

I think it is simple question and I don't belive there is no simple answer... Please help...

i have a example which draws lines with a certain time interval. is that what you are looking for?? — Raghunandan, May 23 '13 at 05:25
I think your example is similar to the one in link. It would be the best to see how to draw whole Path... I can't belive it is so difficult. If you think it can help me please post it — Marek, May 23 '13 at 08:49
the example i have draws a line then waits for 5 seconds draws the second line and so on. looking for something similar?? — Raghunandan, May 23 '13 at 08:53
Please post it (but make it as simple as possible). I will take a look on it. Or maybe if you understand it you can modify it to draw a Path and to wait for example 50ms to draw each Point in the Path? — Marek, May 24 '13 at 07:01
it draws the path after 5 seconds. however i am not sure how to draw points after 5 seconds. if you want i can post the same — Raghunandan, May 24 '13 at 07:03

score 4 · Answer 1 · edited Oct 07 '16 at 13:02

I found out that there is no solution for drawing a Path with the time interval. My walk around solution is this one, where I reset my path path and create it again from Point array. i and j are global variables:

public void onDraw(Canvas canvas) { 

    if (i < strokes.length && j < strokes[i].length)
    {
        if (i == 0 && j == 0)
        {
            path.reset();
            path.moveTo(strokes[0][0].x, strokes[0][0].y);
        }
        if(j == 0)
            strokePaint.setColor(Color.RED);
        else
            strokePaint.setColor(Color.parseColor("#10BCC9"));
        path.lineTo(strokes[i][j].x, strokes[i][j].y);
        canvas.drawPath(path, strokePaint);
        for(int k = 0; i < textCords.size() && k <= i ; k++)
            canvas.drawText(String.valueOf(k+1), textCords.get(k).x, textCords.get(k).y, textPaint);
        if (j == strokes[i].length-1)
        {
            i++;
            j = 0;
            if (i < strokes.length)
            path.moveTo(strokes[i][0].x, strokes[i][0].y);
        }
        else
            j++;
        if (i < strokes.length)
        {
            postInvalidateDelayed(5);
        }
        else
        {
            i = 0;
            j = 0;
            animation = false;
        }
    }
}

I hope it will help someone...

I asked a [very similar question](https://stackoverflow.com/q/70934566/3692177) a few days ago. My goal is more or less the same than this QA. The code in your answer might help in my case, but *I have several doubts about it:* is it actually necessary to write the drawing loop inside `onDraw`? Can't I extract that logic into a new method or something? Also, what's the point of iterating the strokes' matrix with globals? I bet it works, but it looks so confusing for me :-S — SebasSBM, Feb 03 '22 at 00:34

Draw a Path as animation on canvas

1 Answers1

Linked