Animate an images rotation

[stymie]

I was wondering if there were any built in ways or libraries that
would allow me to continously rotate an image in a 360 degrees
circle.Been using google but have not come up with anything as of yet.

[John LaBanca]

As far as I know, there is no way to rotate an image in CSS.  You would have to generate 360 versions of the image in photo editing software (or using Java's image library) , then bundle them up into a ClientBundle and extend Animation to animate the rotation.  GWT doesn't have built in support for this.

Thanks,
John LaBanca
jlab...@google.com

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[K. Adam Christensen]

Hi,

stymie <james...@gmail.com> writes:

You could extend GWT's Animation class to loop through 360 images to
give you that rotation. Check out the following links:

http://giantflyingsaucer.com/blog/?p=1548
http://stackoverflow.com/questions/2669065/gwt-animation-final-value-is-not-respected
http://google-web-toolkit.googlecode.com/svn/javadoc/1.6/com/google/gwt/animation/client/Animation.html

You can also get a feel for what this technique could look like by
checking out the 360 demo at http://www.apple.com/html5/

There is of course another way where you can use an animated gif to
animate over all of the different angles of whatever you have.

All of that being said, please reconsider a continuously rotating
image. It can be very distracting as a user to see something constantly
animating as well as I don't know how performant this will be on the
page. What I do like about 360 degree demos is when I actively interact
with it, clicking and dragging to see all the different angles. I think
we can say that there is a reason the 360 degree spinning logo images
from the 1990s are gone today :)

Cheers,
- Adam

[Brendan Kenny]

Hi Stymie,

I wrote a GWT module early this year to wrap up CSS3 2d transforms
which should be exactly what you need. It supports Safari 3.2+, Chrome
5+, Firefox 3.5+, Opera 10.5+, and Internet Explorer 8.

The code site is:
http://code.google.com/p/gwt-ns/

and I wrote a tutorial with an example and full source code here:
http://extremelysatisfactorytotalitarianism.com/blog/?p=1763

Unfortunately I haven't been able to go back to it to add support for
earlier versions of IE or for CSS transitions, but I'm still available
to answer questions if I catch them in this group, on my blog, or on
twitter.

Hope it helps!