如何在SVG中实现连续运动错觉？

Question

想象一下这样的进度条，它会向左移动，从而产生运动感： 注意：动画顶部的亮绿色细线是压缩伪像。

我正在寻找一种实现类似内容的方法，但是要在任意SVG路径中实现，例如：

我正在尝试了解那里到底发生了什么，例如：

• 这是一个有很多停靠点的坡度，并且停靠点不断移动吗？
• 这么多相邻的，倾斜的矩形是否一致地移动？
• 这是一个倾斜的相邻矩形的长序列，并且带有“滑动窗口”吗？

如何将这些动画概念化？使用SVG原语实现它的最佳实践是什么？

Answer 1

我使用了两次路径：#a和#b。 #a和#b都具有stroke-dasharray: 1，但#b的ID偏移量stroke-dashoffset: 1;

我正在为stroke-dashoffset和#a的{​​{1}}制作动画。

#b

use {
  stroke-dasharray: 1;
}
#a {
  stroke: green;
  animation: dasha 5s linear infinite;
}
#b {
  stroke: DarkSeaGreen;
  stroke-dashoffset: 1;
  animation: dashb 5s linear infinite;
}
@keyframes dasha {
  to {
    stroke-dashoffset: -54.66;
  }
}
@keyframes dashb {
  to {
    stroke-dashoffset: -53.66;
  }
}

更新

如果使用css变量，则只能使用一种动画：

<svg viewBox='0 0 24 24' width="200"><title>gesture</title>
    <defs><path id="thePath"  fill="none" d='M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1h2.46'></path>
  </defs>
    <use id="a" xlink:href="#thePath" />
    <use id="b" xlink:href="#thePath" />
</svg>

use {
  stroke-dasharray: 1;
}
#a {
  --offset:0;
  stroke: green;
  stroke-dashoffset: 53.66;
  animation: dash 5s linear infinite;
}
#b {
  --offset:1;
  stroke: DarkSeaGreen;
  stroke-dashoffset: 54.66;
  animation: dash 5s linear infinite;
}
@keyframes dash {
  to {
    stroke-dashoffset: var(--offset)
  }
}

Answer 2

一种实现方法是使用动画图案。像这样：

<svg width="800px" height="600px">
  <defs>
    <pattern id="skewrect"  x="0%" y="0%" width="20%" height="100%" patternTransform="skewX(30)" viewBox="-7 160 60 60">
      <animate attributeName="x" from="20%" to="0%" dur="2s" repeatCount="indefinite"/>
      <polygon points="0,0 0,600 20,600 20,0" fill="green"/>
      <polygon points="20,40 20,600 40,600 40,20" fill="grey"/>
    </pattern>
  </defs>
  
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="url(#skewrect)" fill="none" stroke-width="10"/>
  
</svg>

您也可以使用渐变或滤镜来实现。