-1

I am looking for a good Java/GWT/Smart GWT or Ext GWT/Javascript library that does the following in a web application-

(1) Take an image of a bottle, and rotate it.

(2) I should be able to specify angle of rotation, time taken to complete that rotation

(3) I should be easily able to change the bottle image, for eg, for a specific sponsor.

Ideally I want the library to support all browsers, including IE 6/7/8, however if your library supports only newer versions of IE, even then kindly mention that library as a possible solution for the problem.

Am I correct in thinking that such type of animation is possible only in Css3 or flash for browser?

Arvind
  • 6,404
  • 20
  • 94
  • 143

4 Answers4

1

For older browsers you are correct, CSS3 and most propably flash is you only hope to achieve that. For newer browsers, though, SVG can be used instead, which provides many advantages over flash. You should look into lib-gwt-svg as a stand alone library for SVG manipulation through GWT, which can be used within SmartGWT, as well. Another possibility, is to check the examples provided from SmartGWT. I haven't used them myself, and can't determine if they can provide a total solution to your problem, but they seem to be near what you want, so, maybe, with some tweaking you can get where you want. If I recall well, they, too, are based on SVG.

gpapaz
  • 889
  • 14
  • 23
1

@Arvind, I'm agreed to gpapaz's answer. In addition I'm posting a link of an example using SmartGWT, which might fulfill all the 3 requirements of yours. example.

RAS
  • 8,100
  • 16
  • 64
  • 86
1

The solutions provided by gpapaz and RAS, are quite good, but both deal with graphics using SVG- which is not supported by older browsers (IE6 comes to mind).

I have found a library for GWT called Gwt-graphics which draws/animates using SVG for newer browsers, and it supports Internet Explorer 6 and newer (6,7 and 8 use VML rendering, 9 uses SVG) as well as Firefox, Chrome, Opera and Safari.

Arvind
  • 6,404
  • 20
  • 94
  • 143
0

raphaeljs and its gwt counterpart raphael4gwt support this easily.

in raphaeljs (and very similar in raphael4gwt): 

var paper = Raphael("#paper1", 700,700); 
var bottle1 = ppaer.image("bottle1.png", 100,100, 50,200); 
bottle1.transfor("r22"); //rotate 22 degrees
cancerbero
  • 6,799
  • 1
  • 32
  • 24