Перемещение случайным образом объектов SVG с использованием ванильного JavaScript - PullRequest
Новая
       24

Перемещение случайным образом объектов SVG с использованием ванильного JavaScript

0 голосов
/ 30 мая 2019

Я хочу перемещать мои объекты SVG случайным образом, используя ванильный JavaScript, я делаю это, чтобы переместить элемент, добавив значение к 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 ]

1 голос
/ 30 мая 2019

Вы можете анимировать элементы или классы следующим образом: 

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

@keyframes move {
  0% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0px);
  }
}
0 голосов
/ 30 мая 2019

Вам нужно построить цикл, чтобы сделать это, используя "vanilla" javascript.

Основной способ сделать это будет: 

let fps = 60  // frames per second

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

window.setInterval(loop, 1000 / fps)

Затем в функции цикла перемещайте элементы SVG так, как вам хочется.

Некоторые библиотеки очень помогают в этом. На ум приходят несколько SVG.js, two.js, speed.js ...

...