Question

我想使用香草javascript随机移动svg对象，我通过将cx的值增加10px使其移动元素，但它喜欢跳跃，是否有其他方法可以平滑地移动它，关键帧不起作用。并且svg文件中使用了javascript，我需要达到这些效果，例如仅用这些元素弹起球这样的效果： https://codepen.io/pintergabor/pen/DywHc

这应该用作背景图片。

<None Include="$(SolutionDir)\Lib\**\*" TargetPath="%(Filename)%(Extension)" CopyToOutputDirectory="PreserveNewest" />

Answer 1

您可以为元素或类设置动画：

circle, my-class {
  animation: move 2s infinite alternate;
}

@keyframes move {
  0% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0px);
  }
}

Answer 2

您需要构建一个循环来使用“香草” javascript。

做到这一点的基本方法是：

let fps = 60  // frames per second

function loop(){
   console.log('in loop')
}

window.setInterval(loop, 1000 / fps)

然后在循环功能中根据需要移动svg元素。

一些库对此有很大帮助。浮现在脑海的是SVG.js，two.js，Velocity.js ...

使用香草JavaScript移动随机SVG对象

2 个答案: