хорошая идея! Вот один из способов сделать это. Эта версия использует SMIL анимацию. обратное движение - это что-то вроде хака, возможно, есть лучший способ его реализовать
как это в основном работает: я помещаю прямоугольники в 0,0 и перемещаю их вправо. Я вычисляю, как долго прямоугольник должен пройти свою собственную длину (+ расстояние между двумя канатами), а затем устанавливаю начальное время анимации на отрицательное значение, соответствующее его позиции, чтобы он достиг своего правильного места в момент времени 0 с.
если у вас есть какие-либо вопросы, просто спросите, я изменю ответ, чтобы уточнить, как это работает ... надеюсь, это поможет
var svgns = "http://www.w3.org/2000/svg"
function rect(w, h, c) {
var rect = document.createElementNS(svgns, "rect")
rect.setAttribute("width", w)
rect.setAttribute("height", h)
rect.setAttribute("class", c)
return rect
}
function animate(from, to, dur, begin) {
var anim = document.createElementNS(svgns, "animate")
anim.setAttribute("attributeName", "x")
anim.setAttribute("from", from)
anim.setAttribute("to", to)
anim.setAttribute("dur", dur)
anim.setAttribute("begin", begin)
anim.setAttribute("repeatCount", "indefinite")
return anim
}
function createRow(rectWidth, rectHeight, rectPadding, numRects, dur, classes) {
var g = document.createElementNS(svgns, "g")
var totalWidth = (rectWidth + rectPadding) * (numRects)
var distanceToTravel = (rectWidth + rectPadding) * (numRects)
var pixelPerSecond = distanceToTravel / dur
var durPerRect = (rectWidth + rectPadding) / pixelPerSecond
for (var i = 0; i < numRects; i++) {
var r = rect(rectWidth, rectHeight, classes[i % classes.length])
var a = animate(-(rectWidth + rectPadding), distanceToTravel, dur, -(i * durPerRect))
r.appendChild(a)
g.appendChild(r)
}
return g
}
row1.appendChild(createRow(89, 32, 5, 10, 17, ["c1", "c2", "c2", "c1", "c3"]))
row2.appendChild(createRow(89, 32, 5, 10, 13, ["c2", "c1", "c1", "c3", "c2"]))
row3.appendChild(createRow(89, 32, 5, 10, 11, ["c3", "c3", "c1", "c2", "c1"]))
rect {
rx: 5
}
.c1 {
fill: #38324d;
}
.c2 {
fill: #42cc7f;
}
.c3 {
fill: #937ce3;
}
<svg id="svg" width="300" height="200" viewBox="0 0 600 400">
<g transform="translate(200,0) rotate(-61, 300, 60) translate(-100,0)">
<g id="row1"/>
<g id="row2" transform="translate(0,40)"/>
</g>
<g transform="translate(200,0) rotate(119, 300, 110) translate(-100,0)">
<g id="row3" transform="translate(0,80)"/>
</g>
</svg>