ищу хорошую библиотеку java / gwt / js для создания анимации «вращающаяся бутылка»

Question

Я ищу хорошую библиотеку Java / GWT / Smart GWT или Ext GWT / Javascript, которая выполняет следующие действия в веб-приложении-

(1) Возьмите изображение бутылки и поверните его.

(2) Я должен быть в состоянии указать угол поворота, время, необходимое для завершения этого поворота

(3) Я легко смогу изменить изображение бутылки, например, для конкретного спонсора.

В идеале я хочу, чтобы библиотека поддерживала все браузеры, включая IE 6/7/8, однако, если ваша библиотека поддерживает только более новые версии IE, даже тогда любезно упомяните эту библиотеку в качестве возможного решения проблемы.

Правильно ли я считаю, что такой тип анимации возможен только в Css3 или flash для браузера?

Answer 1

@ Арвинд, я согласен с ответом gpapaz.Кроме того, я публикую ссылку на пример с использованием SmartGWT, который может удовлетворить все 3 ваших требования. пример .

Answer 2

Решения, предоставляемые gpapaz и RAS, довольно хороши, но оба имеют дело с графикой с использованием SVG, который не поддерживается старыми браузерами (IE6 приходит на ум).

Я нашел библиотеку для GWT под названием Gwt-graphics , которая рисует / анимирует, используя SVG для новых браузеров, и поддерживает Internet Explorer 6 и более новые (6,7 и 8 используют визуализацию VML, 9 использует SVG), а также Firefox, Chrome, Opera и Safari.

Answer 3

Для более старых браузеров вы правы, CSS3 и наиболее вероятный flash - это единственная надежда на достижение этой цели. Однако для более новых браузеров можно использовать SVG, что дает много преимуществ по сравнению с flash. Вам следует рассмотреть lib-gwt-svg как отдельную библиотеку для манипулирования SVG через GWT, которая также может использоваться в SmartGWT. Другая возможность, это проверить примеры, предоставленные из SmartGWT . Я сам ими не пользовался и не могу определить, могут ли они обеспечить полное решение вашей проблемы, но они, похоже, соответствуют вашим ожиданиям, поэтому, возможно, с некоторыми изменениями вы сможете получить то, что хотите. Если я хорошо помню, они тоже основаны на SVG.

Answer 4

raphaeljs и его коллега по gwt raphael4gwt легко это поддерживают.

в Raphaeljs (и очень похоже на Raphael4gwt):

var paper = Raphael("#paper1", 700,700); 
var bottle1 = ppaer.image("bottle1.png", 100,100, 50,200); 
bottle1.transfor("r22"); //rotate 22 degrees