使用动态生成在屏幕内外对 SVG 对象进行动画处理

Question

I am attempting to create an animation using an SVG object that I have whereby, each individual SVG rectangle in a single row animates in a scrolling fashion, either up or down. I'm struggling to find both the resources to learn how to do this and the best method to actually implement this functionality.

I think I would also need the elements to be dynamically generated so that, there is never a gap in the rectangles as the exit and enter the screen.

The code I have so far:

<div class="hero--wrapper">
  <div class="hero--inner">
    <div class="page--center">
      <div class="svg-rect--el">
        <svg xmlns="http://www.w3.org/2000/svg" width="688.571" height="1226.457" viewBox="0 0 688.571 1226.457" preserveAspectRatio="none">
          <defs>
            <style>
              .cls-1 {
                fill: #38324d;
              }

              .cls-2 {
                fill: #42cc7f;
              }

              .cls-3 {
                fill: #937ce3;
              }
            </style>
          </defs>
          <g id="Group_1" data-name="Group 1" transform="translate(-1009.907 83.176)">
            <rect id="Rectangle_16" data-name="Rectangle 16" class="cls-1" width="89" height="32" rx="4" transform="translate(1233.124 669.715) rotate(-64)"/>
            <rect id="Rectangle_22" data-name="Rectangle 22" class="cls-1" width="89" height="32" rx="4" transform="translate(1256.124 728.715) rotate(-64)"/>
            <rect id="Rectangle_35" data-name="Rectangle 35" class="cls-1" width="89" height="32" rx="4" transform="translate(1317.124 707.715) rotate(-64)"/>
            <rect id="Rectangle_8" data-name="Rectangle 8" class="cls-2" width="89" height="32" rx="4" transform="translate(1412.715 302.144) rotate(-64)"/>
            <rect id="Rectangle_26" data-name="Rectangle 26" class="cls-2" width="89" height="32" rx="4" transform="translate(1435.715 361.144) rotate(-64)"/>
            <rect id="Rectangle_39" data-name="Rectangle 39" class="cls-1" width="89" height="32" rx="4" transform="translate(1496.715 340.144) rotate(-64)"/>
            <rect id="Rectangle_10" data-name="Rectangle 10" class="cls-1" width="89" height="32" rx="4" transform="translate(1054.522 1037.148) rotate(-64)"/>
            <rect id="Rectangle_19" data-name="Rectangle 19" class="cls-1" width="89" height="32" rx="4" transform="translate(1077.522 1096.148) rotate(-64)"/>
            <rect id="Rectangle_32" data-name="Rectangle 32" class="cls-2" width="89" height="32" rx="4" transform="translate(1138.522 1075.148) rotate(-64)"/>
            <rect id="Rectangle_4" data-name="Rectangle 4" class="cls-3" width="89" height="32" rx="4" transform="translate(1502.086 118.923) rotate(-64)"/>
            <rect id="Rectangle_28" data-name="Rectangle 28" class="cls-3" width="89" height="32" rx="4" transform="translate(1525.086 177.923) rotate(-64)"/>
            <rect id="Rectangle_41" data-name="Rectangle 41" class="cls-3" width="89" height="32" rx="4" transform="translate(1586.086 156.923) rotate(-64)"/>
            <rect id="Rectangle_14" data-name="Rectangle 14" class="cls-3" width="89" height="32" rx="4" transform="translate(1143.893 853.927) rotate(-64)"/>
            <rect id="Rectangle_17" data-name="Rectangle 17" class="cls-3" width="89" height="32" rx="4" transform="translate(1166.893 912.927) rotate(-64)"/>
            <rect id="Rectangle_30" data-name="Rectangle 30" class="cls-3" width="89" height="32" rx="4" transform="translate(1227.893 891.927) rotate(-64)"/>
            <rect id="Rectangle_5" data-name="Rectangle 5" class="cls-1" width="89" height="32" rx="4" transform="translate(1323.484 486.355) rotate(-64)"/>
            <rect id="Rectangle_24" data-name="Rectangle 24" class="cls-1" width="89" height="32" rx="4" transform="translate(1346.484 545.355) rotate(-64)"/>
            <rect id="Rectangle_37" data-name="Rectangle 37" class="cls-3" width="89" height="32" rx="4" transform="translate(1407.484 524.355) rotate(-64)"/>
            <rect id="Rectangle_2" data-name="Rectangle 2" class="cls-2" width="89" height="32" rx="4" transform="translate(1546.701 26.817) rotate(-64)"/>
            <rect id="Rectangle_29" data-name="Rectangle 29" class="cls-1" width="89" height="32" rx="4" transform="translate(1569.701 85.817) rotate(-64)"/>
            <rect id="Rectangle_43" data-name="Rectangle 43" class="cls-2" width="89" height="32" rx="4" transform="translate(1614.701 -3.183) rotate(-64)"/>
            <rect id="Rectangle_42" data-name="Rectangle 42" class="cls-3" width="89" height="32" rx="4" transform="translate(1630.701 64.817) rotate(-64)"/>
            <rect id="Rectangle_15" data-name="Rectangle 15" class="cls-2" width="89" height="32" rx="4" transform="translate(1188.508 761.821) rotate(-64)"/>
            <rect id="Rectangle_20" data-name="Rectangle 20" class="cls-1" width="89" height="32" rx="4" transform="translate(1211.508 820.821) rotate(-64)"/>
            <rect id="Rectangle_33" data-name="Rectangle 33" class="cls-2" width="89" height="32" rx="4" transform="translate(1272.508 799.821) rotate(-64)"/>
            <rect id="Rectangle_6" data-name="Rectangle 6" class="cls-3" width="89" height="32" rx="4" transform="translate(1368.1 394.249) rotate(-64)"/>
            <rect id="Rectangle_25" data-name="Rectangle 25" class="cls-3" width="89" height="32" rx="4" transform="translate(1391.1 453.249) rotate(-64)"/>
            <rect id="Rectangle_38" data-name="Rectangle 38" class="cls-3" width="89" height="32" rx="4" transform="translate(1452.1 432.249) rotate(-64)"/>
            <rect id="Rectangle_3" data-name="Rectangle 3" class="cls-1" width="89" height="32" rx="4" transform="translate(1457.47 211.028) rotate(-64)"/>
            <rect id="Rectangle_27" data-name="Rectangle 27" class="cls-3" width="89" height="32" rx="4" transform="translate(1480.47 270.028) rotate(-64)"/>
            <rect id="Rectangle_40" data-name="Rectangle 40" class="cls-2" width="89" height="32" rx="4" transform="translate(1541.47 249.028) rotate(-64)"/>
            <rect id="Rectangle_12" data-name="Rectangle 12" class="cls-2" width="89" height="32" rx="4" transform="translate(1099.277 946.032) rotate(-64)"/>
            <rect id="Rectangle_18" data-name="Rectangle 18" class="cls-3" width="89" height="32" rx="4" transform="translate(1122.277 1005.032) rotate(-64)"/>
            <rect id="Rectangle_31" data-name="Rectangle 31" class="cls-2" width="89" height="32" rx="4" transform="translate(1183.277 984.032) rotate(-64)"/>
            <rect id="Rectangle_7" data-name="Rectangle 7" class="cls-3" width="89" height="32" rx="4" transform="translate(1278.869 578.461) rotate(-64)"/>
            <rect id="Rectangle_23" data-name="Rectangle 23" class="cls-3" width="89" height="32" rx="4" transform="translate(1301.869 637.461) rotate(-64)"/>
            <rect id="Rectangle_36" data-name="Rectangle 36" class="cls-2" width="89" height="32" rx="4" transform="translate(1362.869 616.461) rotate(-64)"/>
            <rect id="Rectangle_9" data-name="Rectangle 9" class="cls-3" width="89" height="32" rx="4" transform="translate(1009.907 1129.253) rotate(-64)"/>
          </g>
        </svg>
      </div>
    </div>
  </div>
</div>

/* Keyframes */

@keyframes slide {
  from {
    top: 0;
  }

  to {
    top: 100%;
  }
}

/* General Stying */

body {
  margin: 0;
  padding: 0;
}

.hero--wrapper .hero--inner {
  max-height: 745px;
  height: 745px;
  overflow: hidden;
}

.page--center {
  margin: 0 auto;
  max-width: 1140px;
  padding: 0 20px;
}

.hero--wrapper .hero--inner .svg-rect--el {
    position: relative;
    height: 100%;
    width: 100%;
}

.hero--wrapper .hero--inner .svg-rect--el svg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.hero--wrapper .hero--inner .svg-rect--el svg rect {
  animation: slide 10s linear infinite;
}

Link to jsfiddle

It's not a lot so I do apologies but, if someone could point me in the right direction, that would be greatly appreciated.

Thanks :)

Answer 1

nice idea! here is one way to do it. This version uses SMIL animations. the reverse motion is a bit of a hack, there is probably a better way to implement it.

how it basically works: I place the rectangles at 0,0 and move them to the right. I calculate how long a rectangle needs to travel it's own length (+ the space between two rects) and then set the starting time of the animation to a negative value corresponding to its position, so that it reaches it's correct place at time 0s.

if you have any question, just ask, i will modify the answer to clarify how this works... hope it helps

 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>