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

Question

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

我正在寻找一种方法来实现类似的东西，但在任意 SVG 路径中，例如这个：

我试图了解那里真正发生了什么，例如：

• 是一个有很多停靠点的梯度，并且停靠点一直在移动吗？
• 这些许多相邻的、倾斜的矩形是否一致移动？
• 它是一长串倾斜的相邻矩形，“滑动窗口”沿着它移动吗？

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

Answer 1

我使用了两次路径：#a和#b. 双方#a并#b有stroke-dasharray: 1但#bID偏移stroke-dashoffset: 1;

我正在stroke-dashoffset为#a和 制作动画#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;
  }
}

<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>

更新

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

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)
  }
}

<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>