Блог

Я бьюсь головой об стену с этим. У меня есть raphael js версии 2.0, и мне нужно, чтобы изображения вращались в кроссбраузерном режиме. Я бы хотел сделать это в CSS3, но не все браузеры поддерживают то, что мне нужно сделать.

итак, после того, как я пораскинул мозгами, я отправился на игровую площадку Raphael и попробовал там некоторый код. Там тоже не работает. Что здесь происходит?

перейдите на игровую площадку: http://raphaeljs.com/playground .html запустите этот код, должен появиться контур квадрата. paper.rect(100, 100, 300,300).animate({вращение: «-45″}, 2000);

использование transform работает:

paper.rect(100, 100, 300,300).animate({transform:»r45»}, 2000);

но, к сожалению, с transform я не могу указать центральную точку. Я хочу, чтобы объект вращался в левом нижнем углу. Я могу сделать это с помощью этого кода:

paper.rect(100, 100, 300,300).rotate(45,0,300)

но это не анимирует, не принимает смягчения и не имеет никаких обратных вызовов.

Я видел «вращение» в нескольких примерах, включая эти:

http://www.irunmywebsite.com/raphael/additionalhelp.php#PAGETOP
http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

спасибо, — кит

Переходим на сайт игровой площадки и вставляем этот код:

 paper.rect(100, 100, 300,300).animate({transform:"r-45,0,0"}, 2000);
 

поворачивает прямоугольник из абсолютного положения 0,0. Смотрите raphael js code @ github, который показывает, что transform для достижения поворота может потребоваться либо 2, либо 4 параметра.

Атрибут поворота, по-видимому, отсутствует в спецификации 2.0. Он существовал в 1.x. Я не знаю, почему это так, но я не могу найти его в новой документации. Я ожидаю, что это упущение, которое будет исправлено в ходе незначительного пересмотра в будущем.

Тем временем вы можете создать свой собственный обработчик анимации и вызывать .rotate для каждого тика в зависимости от вашего собственного ослабления.