Simple button animation not working on Android...

[tjo.mobile]

I have a simple animation that displays a spinning wheel. I have been using four images as button icons which are changed in sequence to create the animation. It seems to work fine on windows however when I run it on Android the animation appears to jump between images 1 & 3 or 2 & 4, so that it is only displaying two of the four images.

Code looks like this and is running inside a loop so tImgRotate is constantly incremented:

Code: Select all

add 1 to tImgRotate
         if tImgRotate = "1999" then
            add 1 to wcount
            set the icon of button "wbut" to "image" & wcount & ".png" 
            put 0 into tImgRotate
            if wcount = "4" then
               put "0" into wcount
            end if
         end if

I have tried setting acceleratedRendering to true as well as setting the layer mode to Dynamic (even tried Scrolling). None of it worked and setting acceleratedRendering to true casued a bunch of unexpected and unwanted results in my app.

I should also mention that this spinning wheel is a busy indicator as the app is doing a bunch of calculations which take some time and are also fairly resource intensive. Is it possible that the calculations are slowing the device down and causing the animation to not display correctly?

Any suggestions or advice are greatly appreciated. Is there a better way to do a simple animation in Android? I did also try an animated gif but it didn't really work properly and looked pretty bad.

Thanks to anyone who can offer advice,

TJ.

[jmburnod]

Hi tjo,
An icon should be = short id of an image

Code: Select all

 set the icon of button "wbut" to the short id of image ("image" & wcount & ".png")

Best regards
Jean-Marc

[jacque]

Using the ID will be marginally faster than the image name, though both are accepted. But in general I've found quick screen changes to be dodgy on Android and often slow. For that reason I use built-in animations instead as much as possible. For example, I have a slide-out panel that was jittery and unreliable using the "move" command, but became quite responsive when I changed it to use lock/unlock screen coupled with a visual effect.

If you are happy with the OS default busy indicator, you will get better results using mobileBusyIndicatorStart and mobileBusyIndicatorStop. The OS draws this and doesn't interfere with your scripts.

[tjo.mobile]

Thank you both for your advice. I tried using the "short name of", however the problem still exists.

I suppose I could use mobileBusyIndicator, but I was hoping to use my own images that are themed to go with the app.

Thanks again for the ideas, I will keep looking for another way to create this animation.

TJ.

[jmburnod]

I tried using the "short name of", however the problem still exists.

Not "the short name" but "the short id"

[MaxV]

I have a simple animation that displays a spinning wheel. I have been using four images as button icons which are changed in sequence to create the animation. It seems to work fine on windows however when I run it on Android the animation appears to jump between images 1 & 3 or 2 & 4, so that it is only displaying two of the four images.

Usually the animation speed is too fast. Check animation timing.

Any suggestions or advice are greatly appreciated. Is there a better way to do a simple animation in Android? I did also try an animated gif but it didn't really work properly and looked pretty bad.

Livecode 9 has the Android busy indicator widget ready to use ("spinner").

[tjo.mobile]

Thanks for the suggestions Max.

I tried adjusting some of the numbers in the loops to slow down and speed up the animation. Works beautifully on Windows, but only shows every second image on Android.

I might have to resort to using the Spinner on Android. I wanted to use an image that works with the theme of my app, but the Spinner would probably suffice.

I see other apps and games on Android that seem to have decent animation. I just want to have an image rotate smoothly. I feel like there should be a way to do this effectively in LiveCode.

I did also try using one image and setting the angle ahead by 90 degrees repeatedly. This actually worked and looked OK, but it was extremely slow and caused the whole command to run about 5-10x slower. Perhaps there is a way I can keep resetting the angle with another chunk of code while my command is running?

Thanks again,

TJ.

[jacque]

The background process is likely taking up the CPU time when the animation is supposed to be changing. Coupled with the slower processors on many Android devices you'll see a slowdown.

The background handler needs to yield time to allow other processes to function. There are different ways to do that depending on the script and what it needs to be doing. You can insert "wait 1 with messages" throughout, or better is to use a "send <msg> in <time>" structure if the handler will allow it.

[MaxV]

See these posts:
http://livecodeitalia.blogspot.it/2015/ ... mente.html
http://livecodeitalia.blogspot.it/2015/ ... -allo.html

[tjo.mobile]

Thank you both for the advice. I have one question about the line:

send ruotafigura to me in 0.017 sec

Previously in the command you have already set the angle property. Does the LiveCode interpreter read the whole command before execution so that it knows not to set the angle property until it gets to the line "send ruotafigura to me in 0.017 sec" ?

Also I would have guessed that "me" would be the START/STOP button, but it appears that LiveCode will consider "graphic 1" to be "me". I assume because it was the last object on which you set the property? If this is wrong can you please clarify?

Thanks again for any help or advice,

TJ.

[MaxV]

Thank you both for the advice. I have one question about the line:

Code: Select all

send ruotafigura to me in 0.017 sec 

Previously in the command you have already set the angle property. Does the LiveCode interpreter read the whole command before execution so that it knows not to set the angle property until it gets to the line "send ruotafigura to me in 0.017 sec" ?

Yes, livecode reads all scripts, then start executing in message path order.

Also I would have guessed that "me" would be the START/STOP button, but it appears that LiveCode will consider "graphic 1" to be "me". I assume because it was the last object on which you set the property? If this is wrong can you please clarify?

All the code is in the button. The button set the properties of graphic 1. Ruotafigura message is in the button, so send to me is correct.

[Ledigimate]

An alternative to using a button and seperate image objects for each frame, is taking advantage of LiveCode's built-in support for animated GIFs. You would then have only one image that animates automatically, so there would be no need for sending messages to make it animate. You can use messages to manually animate it if you want to, but you'd still have only one image. Have a look at the currentFrame and repeatCount properties in the dictionary.

The only drawbacks to using an animated GIF are its limited color depth (256 colors), and its flat transparency. If your wheel still looks acceptable after converting to an animated GIF, then it may be worth a try.

- Gerrie

[tjo.mobile]

Thank you all for the ideas and support.

I did try using an animated gif, however I did not have a lot of success getting it to display properly in livecode. Also after running the animated gif in a browser I was generally disappointed with how it looked.

However I have found some success by simply adding the line "wait 1 tick" or "wait 0.017 seconds" at the very end of my loop structure. It seems that by adding this tiny delay it allows the image to update.

Thank you all for the help, it is very much appreciated.

TJ.

[MaxV]

Beware of use tick, is like a CPU cicle (it's a livecode cicle), so the result can be different from computer to computer.