使用vanilla javascript随机移动svg对象
使用vanilla javascript随机移动svg对象
提问于 2019-05-29 22:23:27
我想使用vanilla javascript随机移动我的svg对象，我让它通过向cx添加10px的值来移动元素，但它喜欢跳跃，有没有其他方法可以平滑地移动它，关键帧不起作用。而javascript是在svg文件中使用的，我需要达到像弹跳球一样的效果，就像这样的元素效果：https://codepen.io/pintergabor/pen/DywHc
这应该被用作背景图片。
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
.cls-2 {
fill: url(#linear-gradient-2);
}
.cls-3 {
fill: url(#linear-gradient-3);
}
#circle{
animate: circle 4s infinite linear;
}
@keyframes circle{
to{
transform: translate(55rem, 15px);
}
}
</style>
<linearGradient id="linear-gradient" x1="61.83" y1="217.56" x2="61.83" y2="256.64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#9dcb3b" />
<stop offset="1" stop-color="#aa2d23" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="316.43" y1="64.69" x2="316.43" y2="98.31" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-3" x1="321.31" y1="319.11" x2="321.31" y2="396.98" xlink:href="#linear-gradient" />
</defs>
<title>elements</title>
<circle id="circle" class="cls-1" cx="61.83" cy="237.1" r="19.54" />
<polygon id="triangle" class="cls-2" points="316.43 64.69 297.01 98.31 335.84 98.31 316.43 64.69" />
<path id="plus" class="cls-3" d="M323.9,397h-5.18V319.11h5.18Zm36.35-36.35v-5.17H282.37v5.17Z" />
回答 2
Stack Overflow用户
发布于 2019-05-29 22:51:40
您需要使用"vanilla“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……
Stack Overflow用户
发布于 2019-05-29 23:06:10
可以为元素或类设置动画，如下所示：
circle, my-class {
animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translateX(50px);
}
100% {
transform: translateX(0px);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56369306
复制相关文章
相似问题
腾讯云开发者
