WebAnimator

Hi

I am trying to spin a wheel a couple of times. The image is in a WebImageView. I have a spin button. In the action the following code is added.

LogoAnimator.RotateZ(WheelImage, 720, 2.5)
LogoAnimator.Play

When I start the application and click on the button, the image spins twice around.

However if I try to click the button again for another spin, nothing happens.

Can anyone resolve this issue or point me in the right direction thanks.

This may help : https://forum.xojo.com/32796-weird-animator-behavior/0

Thanks Michel, still not working.

See
http://www.w3schools.com/cssref/css3_pr_transform.asp
http://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_rotate
http://www.w3schools.com/jsref/met_win_setinterval.asp

Basically, this is a way to rotate an element in JavaScript without WebAnimator, and with the timer setInterval, to keep the movement.

It is late here, but I may look into WebAnimator tomorrow to see if it can be unstuck with that method.

Thank you Michel

OK. It appears the issue is not new. I found a case from June 2, 2016, but verified the very same bug in RB 2012R1.2.

It would be nice if someone would look into this. The case has been needing review since then.

Here is what I just added to feedback://showreport?report_id=44133 :

Michel Bujardet Today at 11:50 AM
There is definitely an issue in doing two RotateZ in a row.

See the attached project.

I can move the arrow from its current place to 0,0 and then move it to 500,500, and back, as many times as I want.

But RotateZ works only once and for all.

I believe it should be possible to rotate 360, then -360 or any other value. Or even repeat 360, eventually going back to 0 in between. None of that works.

I verified that the same issue presents since RB 2012R1.2.

Nothing is mentioned about that limitation in the LR at http://documentation.xojo.com/index.php/WebAnimator.RotateZ if this is by design.
File attached: spin.xojo_binary_project.zip

Verified in Chrome, Safari and Firefox with 2016R4.1 under macOS Sierra 10.12.3.

Here is a method that rotates clockwise. Add to the Webpage :

[code]Private Sub RotZR(Ctrl as Webcontrol, Deg as Integer, Period as Double)
Dim click as double = Period/Deg
Dim JS as String

JS = JS + “var ctrl = document.getElementById(’”+Ctrl.ControlId+"’);"
js = js + “var r = 0;”
js = js + “var timr = setInterval(function(){ctrl.style.webkitTransform = ‘rotate(’+r+‘deg)’; r++; if (r == “+str(Deg)+”) {clearInterval(timr);} }, “+str(Click)+”);”

self.ExecuteJavaScript(js)

End Sub[/code]

To call it :
RotZR(ImageView1, 720, 2.5)

To rotate counterclockwise, subtract to r.

Note that this is meant for WebKit browsers, such as Safari or Chrome. For other browsers, you must use slightly different code. See
http://www.w3schools.com/cssref/css3_pr_transform.asp

[code]Private Sub RotZR(Ctrl as Webcontrol, Deg as Integer, Period as Double)
Dim click as double = Period/Deg
Dim JS as String

JS = JS + “var ctrl = document.getElementById(’”+Ctrl.ControlId+"’);"
js = js + “var r = 0;”
js = js + "var timr = setInterval(function(){ctrl.style.webkitTransform = ‘rotate(’+r+‘deg)’; " // Code for Chrome, Safari, Opera
js = js + “ctrl.style.msTransform = ‘rotate(’+r+‘deg)’; ctrl.style.transform = ‘rotate(’+r+‘deg)’;”// Code for IE9
js = js + “r++; if (r == “+str(Deg)+”) {clearInterval(timr);} }, “+str(Click)+”);”

self.ExecuteJavaScript(js)

End Sub
[/code]

Works now for IE9 and above, and also for FireFox.

My experience has been that the web animator takes the “shortest path between two points”. If you tell it to rotate “positive” 270 degrees…it will do that the first time. A Subsequent execution animates the image counter clockwise 90 degrees. If you rotate an image 360 degrees, it works the first time…then subsequent executions take the shortest path between the start and end states…which is…no movement at all. To make this work with animator, I usually make four 90 degree movements setting a key frame at each step. Then I play the full animation. Presto-- a predictable 360 rotation every time. (I suppose you could do three 120 degree movements) – If you perform 180 degree movements… you never quite know which direction the rotation will go regardless of your positive/negative setting.

Thank you Michel for all your efforts and also for your input Robert.

You’re welcome, Darren.

Sorry Robert, I don’t see what you mean by “setting a key frame”. Do you mean addKeyFrame ?

Yes, sorry I didn’t make the effort to look up the syntax. But yes, key frames are necessary when you want to force an animation by setting…err…adding intermediate key frames. It’s odd that they don’t seem necessary the first time you animate.

Alright. Thank you.