animating a line

[noclass1980]

Hi, I want to draw a line between (x1,y1) and (x2,y2) as an animation. I can use the Drawline to do it but, of course, it just appears but I'd really like it to 'unfold' over, say 0.5 second to join the points. I've looked at the forum but not found anything. One option is to set the path and then use the alpha animation to fade it in but I would like it to look as if the line was growing from the first co-ordinate to the second. Can anyone help?

I've eventually soved this (with a push in the right direction by Klaus, thanks!). Follow the story below and the solution can be found in Post#15

 

[Beja]

In your drawing equation:
give the "(x2,y2)" variable values, from minimum "(x1,y1)" to maximum "(x2,y2)"
and then use a timer to increase the "(x2,y2)" until it reaches the point you want.

 

[noclass1980]

animating line

In your drawing equation:
give the "(x2,y2)" variable values, from minimum "(x1,y1)" to maximum "(x2,y2)"
and then use a timer to increase the "(x2,y2)" until it reaches the point you want.

Thanks, I had thought of using a simple for-next for this but was just wondering if there as an animation method avialable instead. Will give this a go soon. Thanks again.

 

[noclass1980]

In your drawing equation:
give the "(x2,y2)" variable values, from minimum "(x1,y1)" to maximum "(x2,y2)"
and then use a timer to increase the "(x2,y2)" until it reaches the point you want.

ok, I tried this by putting all the x,y coordinates into two arrays x() and y() and trying the code below. This works and all the lines between the x and y's are drawn in one go. The vertical distance between the x coordinates is fixed so the resulting line is a zig-zag pattern.

For i=1 To 9
Linecvs.DrawLine(x(i-1),y(i-1),x(i),y(i),Colors.Blue,ChartLineWidth)
'allpanels(2) is a panel that holds the canvas
allpanels(2).Invalidate
Next

Now, when I want to show the line "growing" from one x to the next x, I tried the code below.
tantheta is the trignometric relation to calculate the incremental increase in x based on a fixed step value in y from y(i) to y(i+1). The code starts at x(i), y(i) then increments in 10 deltay steps to x(i+1), y(i+1) with the new position of each incremetnal x is calculated based on the incremental y value. This should then show the line growing in 10 incremental steps from x(i), y(i) to x(i+1), y(i+1). The logs show that the corect x and y values are being generated. However, IT DOES NOT WORK. With the Do While Loop, no line drawing occurs at all and with the Do Loop removed it just plots the line in one go.

For i=0 To 9
tantheta=(y(1)-y(0))/(x(i)-x(i-1))
deltay=(y(1)-y(0))/10
oldx=x(i)
for j=1 to 9
newx=(j*deltay)/tantheta
Linecvs.DrawLine(oldx,y(i)+((j-1)*deltay), newx, y(i)+((j*deltay),Colors.Blue,ChartLineWidth)
oldx=newx
now=DateTime.now + 100
Do While DateTime.now<now
Loop
allpanels(2).Invalidate
Next
Next

Is this because the redrawing of the canvas has to occur after the code is finished? (I have a separate Translation animation based on the x and y values that executes perfectly before I want to draw the growing line).
I'm after a smooth aniamtion of this growing line - Does anyone have any suggestions why this method doesn't work or an alternativwe way of animating a growing line? Thanks

 

[klaus]

Try this:

now=DateTime.Now +100
Do While DateTime.Now<now
Loop

Best regards.

 

[noclass1980]

animating line #2

Try this:

now=DateTime.Now +100
Do While DateTime.Now<now
Loop

Best regards.

Sorry that was a typo on my part, the code included the DateTime.now<now. I also tried a DoEvents after the Do-Loop but that didnt work either. Thanks

 

[klaus]

This code works:

Sub DrawLines
    Dim now As Long
    For i = 0 To 8
        deltax = (x(i + 1) - x(i)) / 10
        deltay=(y(i + 1) - y(i)) / 10
        oldx = x(i)
        oldy = y(i)
        For j = 1 To 10
            newx = x(i) + j * deltax
            newy = y(i) + j * deltay
            cvsTest.DrawLine(oldx, oldy, newx, newy, Colors.Blue, 1)
            oldx = newx
            oldy = newy
            now = DateTime.now + 100
            Do While DateTime.now < now
            Loop
            pnlTest.Invalidate
            DoEvents
        Next
    Next
End Sub

Attached a small test project.
Be aware that with dividing the distance between two points by ten, the speed of drawing the lines is proportional to this distance.

Best regards.

 

[noclass1980]

Hi, thank you for the reply. I thought my problem was that the DoEvents I tried was before the panel.invalidate line. However, when I moved the Do Events to after the panel.invalidate (as in your code) that didn't work either. In an earlier post, I mentioned that the growing line occurs after a series of translation animations. After I "switched" off the animation, the lines "grew" as expected so it seems it is something to do with the animation but the odd thing is that if I disable the Do While Loop the lines appear all at once after the animation is completed. How is the Do Loop being affected by the animation? Any suggestions.

 

[klaus]

Do you have a small project showing the problem ?
Without seeing the rest of the code I can't help.

Best regards.

 

[noclass1980]

Do you have a small project showing the problem ?
Without seeing the rest of the code I can't help.

Best regards.

Thank you. I've attached the small project. The lines aren't exactly where I want them but it illustrates the problem I have. If the Do Loop is disabled (lines 176 to 178) and the DoEvents is disabled (line 180), the red lines show all together. If the Do Loop is enabled but the DoEvents is disabled then the lines show after ~10seconds. If the Do Loop and the DoEvents is enabled then the lines don't appear at all. Any suggestions? Thanks.

 

[klaus]

With this code it works fine on my Asus TF700.

Timedelay=DateTime.now+100
Do While DateTime.Now<Timedelay
Loop
Activity.Invalidate
DoEvents

Attached the project as I tested it.

Best regards.

 

[noclass1980]

With this code it works fine on my Asus TF700.

Timedelay=DateTime.now+100
Do While DateTime.Now<Timedelay
Loop
Activity.Invalidate
DoEvents

Attached the project as I tested it.

Best regards.

Your code did exactly the same as mine. I'm trying it on a Galaxy 10.1 tab running Android 4.04. The strange thing is your previous growing line code worked fine so it must be related to the animation. If I try to run the Line sub before the animation then I get a

java.lang.NullPointerException at

Linecvs.DrawLine(lineoldx,lineoldy,linenewx,linenewy,Colors.Red,10)

even though the canvas is initisalised and all the necessary data is available.

 

[klaus]

Sorry, but I can't help no more because I cannot reproduce your behaviour.

Best regards.

 

[noclass1980]

Growing lines!!!

Sorry, but I can't help no more because I cannot reproduce your behaviour.

Best regards.

ok, thanks anyway, if I find a solution, I'll post it for others to use.

:BangHead:

 

[noclass1980]

Solved!

By analysing the Log, and running the code with or without the animation switched on, I discovered that the DoEvents was preventing the drawing of the line. If someone can explain why, I would be grateful. What was happening is that the animation completed and then there was a pause while the code "drew" the lines but the screen didn't refresh until the end of the pause and then the entire line would appear all at once. To see if it is the same for you, change Line 160 from

DeltaLineAnimation1

to

DeltaLineAnimation

I have solved the problem by using a Timer sub which draws part of the line every 100ms so it looks like it is "growing" in the way I wanted it to. I don't know why Klaus's code in Post #10 should work for me but the same code executed after the animation would not work (but did for Klaus!). Anyway, I hope the attached project helps someone. This is the first time I've used a Timer but I'm sure I'll use them again in the future!