Firefox / Gecko не может анимировать transform = "rotate (...)" в SVG? - PullRequest
Новая
       22

Firefox / Gecko не может анимировать transform = "rotate (...)" в SVG?

0 голосов
/ 29 июля 2010

На странице, над которой я работаю, когда пользователь нажимает на объект, одна группа SVG вращается, а другая вращается.

Код в том виде, как он работает, прекрасно работает в WebKit,но это не работает вообще в Gecko.Вот блок кода, который не выполняется Gecko: 

var totStep = dur*2/msrate, step=0;
window.timer = window.setInterval(function(){
    if(step<totStep/2){
    var inangle = -50*easeIn(step,totStep/2);
    iris.setAttribute("transform","rotate("+inangle+" 23 -82)");}else{
    var prog = easeOut2((step-(totStep/2)),totStep/2);
    var outangle = 50*prog;
    var down = 400*prog;
    vinyl.setAttribute("transform","rotate("+(-50+outangle)+" 986 882)");
    needle1.setAttribute("transform","translate(0 "+(-400+down)+")");
    buttons.setAttribute("transform","translate(0 "+(-400+down)+")");}
    step++;
    if (step > totStep) {window.clearInterval(window.timer); return}
});

Большая часть этого кода адаптирована из функции, которая открывает глаза при загрузке страницы, и эта функция прекрасно работает в Gecko,вот почему это загадочно для меня.

Вы можете увидеть страницу со всем ее исходным кодом на этой странице .Проблемная функция написана в связанном eye.js .Проблема возникает, когда пользователь нажимает на «DJ Docroot» в разделе «Музыка» меню, доступ к которому осуществляется нажатием в любом месте.

1 Ответ

0 голосов
/ 01 августа 2010

Вам не хватает второго аргумента для setInterval, чтобы указать интервал, через который должна вызываться функция. Так, например, работает следующий код: 

window.timer = window.setInterval(function(){
    if(step<totStep/2){
    var inangle = -50*easeIn(step,totStep/2);
    iris.setAttribute("transform","rotate("+inangle+" 23 -82)");}else{
    var prog = easeOut2((step-(totStep/2)),totStep/2);
    var outangle = 50*prog;
    var down = 400*prog;
    vinyl.setAttribute("transform","rotate("+(-50+outangle)+" 986 882)");
    needle1.setAttribute("transform","translate(0 "+(-400+down)+")");
    buttons.setAttribute("transform","translate(0 "+(-400+down)+")");}
    step++;
    if (step > totStep) {window.clearInterval(window.timer); return}
},10);

Webkit, вероятно, просто принимает значение по умолчанию.

Кроме того, просто предположим, что в будущем будет легче обнаружить подобные ошибки, если вы примете кодовые соглашения, которые сделают ваш код более разборчивым: http://javascript.crockford.com/code.html

Инструмент, подобный jslint , поможет в этом.

...