Firefox/Gecko 无法为 Transform=“rotate(…)”设置动画在 SVG 中？

发布于 2024-09-11 15:30:00 字数 1113 浏览 8 评论 0原文

在我正在处理的页面中，当用户单击一个对象时，一个 SVG 组会旋转出去，而另一个 SVG 组会旋转进去。

代码在 WebKit 中运行得很好，但在壁虎。以下是 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”时，会出现此问题，该菜单可通过单击任意位置进行访问。

原文

In the page I'm working on, when the user clicks on an object, one SVG group rotates out of the way while another rotates in.

The code as it is works just fine in WebKit, but it isn't working at all in Gecko. Here is the block of code that is not being executed by 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}
});

Most of this code is adapted from a function which opens the eye when the page is loaded, and that function works fine in Gecko, which is why this is enigmatic to me.

You can see the page with all of its source code at this page. The problematic function is written in the linked eye.js. The problem occurs when the user clicks on "DJ Docroot" under the "Music" section of the menu, which is accessed by clicking anywhere.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疾风者 2024-09-18 15:30:00

您缺少 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 将对此有所帮助。

You're missing a second argument to setInterval to specify the interval at which the function should be called. So, for example, the following code works:

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 probably just assumes a default value.

Also, just a suggestion, in the future, it might be easier to spot errors like these if you adopt code conventions that will make your code more legible: http://javascript.crockford.com/code.html

A tool like jslint will help with this.

回复收藏 0 原文

~没有更多了~