我正在尝试使用给定参数 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;
}
});
但是没有用。如何流畅刷新动画？
这是 HTML 代码:
<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>
最佳答案
问题在于，每次执行动画时，都需要给浏览器一个绘制变化的机会。你没有那样做。您的 for 循环只是不断地改变 style 属性，并且永远不会将控制权返回给浏览器。它永远没有机会更新页面。
有几种方法可以解决这个问题。曾几何时，通常使用 window.setTimeout() 调用返回浏览器并让它调用您的代码以更新动画。现在首选的方式是 requestAnimationFrame()打电话。
var svg = document.getElementById("DC");
var x = 10;
var y = 0;
function step(timestamp)
{
svg.setAttribute('style', 'transform: perspective(30em) rotateX(' + x + 'deg) rotateY(' + y + 'deg) scale(0.6, 0.6); perspective: 30em;');
x = x + 10;
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);svg {
background-color: red;
}<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;"></svg>
</body>此处动画的每一步都在 step() 函数中计算。然后在你从函数返回之前，你必须再次调用 requestAnimation() 来让它再次调用 step()。
最后的调用是开始播放开头的动画。
关于javascript - 流畅的 SVG 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45180257/