Fatal编程技术网

Javascript 平滑SVG动画

javascript jquery animation svg

Javascript 平滑SVG动画,javascript,jquery,animation,svg,Javascript,Jquery,Animation,Svg,我正在尝试使用给定参数rotateX和rotateY刷新动画： $(document).ready(function() { var svg = document.getElementById("DC"); var x = 10; var y = 0; for (j = 0; j<8 ; j++) { svg.setAttribute('style', 'transform: perspective(3

我正在尝试使用给定参数rotateX和rotateY刷新动画：

$(document).ready(function() {
        var svg = document.getElementById("DC");
        var x = 10;
        var y = 0;
        for (j = 0; j<8 ; j++) {
            svg.setAttribute('style', 'transform: perspective(30em) rotateX(' + x + 'deg) rotateY(' + y + 'deg) scale(0.6, 0.6); perspective: 30em;');
            x = x  + 10;
        }
    });

$（文档）.ready（函数（）{
var svg=document.getElementById（“DC”）；
var x=10；
var y=0；
对于（j=0；j一些尝试建议：
1.使用绝对定位和静态维度隔离DOM中正在转换的元素
2.设置css属性


问题是，每次执行动画时，您都需要给浏览器一个绘制更改的机会。您没有这样做。您的
for
循环只是不断更改
style
属性，并且永远不会将控制权返回到浏览器。它永远没有机会更新页面

有两种方法可以解决此问题。以前，通常使用
window.setTimeout（）
调用返回浏览器并让它调用代码以更新动画。现在首选的方法是调用



var svg=document.getElementById（“DC”）；
var x=10；
var y=0；
功能步骤（时间戳）
{
setAttribute（'style'，'transform:perspective（30em）rotateX（'+x+'deg）rotateY（'+y+'deg）scale（0.6,0.6）；perspective:30em；'）；
x=x+10；
window.requestAnimationFrame（步骤）；
}
window.requestAnimationFrame（步骤）；


svg{
背景色：红色；
}


一个简单的解决方案是使用CSS转换。

这将允许您轻松定义所使用的速度甚至计时功能



var svg=document.getElementById（“DC”）；
功能更新（x）
{
setAttribute（'style'，'transform:perspective（30em）rotateX（'+x+'deg）rotateY（0deg）scale（0.6,0.6）；perspective:30em；'）；
}
svg.parentNode.offsetWidth；
更新（80）；
num.onchange=e=>update（num.value）；


svg{
背景色：红色；
转变：转变为缓和；
}


x旋转

为什么不尝试使用GreenSock：另外，我也不确定为SVG标记设置动画是不是一个好主意，最好使用组或其他显示元素。谢谢你的建议。如果我想设置值X，并在每次移动鼠标时增加10，我该怎么做？动画没有使用该功能。你应该听我说然后r mousemove事件，并将动画代码放入其中。一旦获得mousemove事件，requestAnimationFrame（function（）{animate（…）；}）；所有这些都可以使用一个框架轻松得多——我喜欢，它有大量易于复制的示例。

<body><svg id="DC" version="1.0" viewBox="0 0 500 408" class="sim" x="0px" y="0px" width="100%" height="100%" style="transform: perspective(30em) rotateX(0deg) rotateY(0deg) scale(0.6, 0.6); perspective: 30em;"><style></body>



<body>
       <div class="viewport" style="position: relative; width: 500px; height: 408px;">
             <svg id="DC" version="1.0" viewBox="0 0 500 408" class="sim" width="500px" height="408px" style="transform: perspective(30em) rotateX(0deg) rotateY(0deg) scale(0.6, 0.6); transform-origin: 0px 0px 0px; will-change: transform;">
               </svg>
         </div>



function animate(frames,x) {
    if(frames > 0) {
        svg.setAttribute('style', 'transform: perspective(30em) rotateX(' + x + 'deg) rotateY(' + y + 'deg) scale(0.6, 0.6); perspective: 30em;');

         requestAnimationFrame(function() { animate(--frames,x+= 10); });
    }
    return;
}