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

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

我正在寻找一种实现类似功能的方法，但采用任意SVG路径，例如：

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

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

---

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

一种方法是使用动画模式。大概是这样的：

---

一种方法是使用动画模式。大概是这样的：

---

我使用了两次路径：

#a

和

#b

。

#a

和

#b

都有

笔划dasharray:1

但

#b

id偏移

笔划dashoffset:1

我正在为
#a
和
#b
设置
笔划dashoffset
的动画


使用{
笔划数组：1；
}
#a{
笔画：绿色；
动画：大沙5s线性无限；
}
#b{
笔划：暗绿色；
行程偏移：1；
动画：dashb 5s线性无限；
}
@关键帧dasha{
到{
行程偏移：-54.66；
}
}
@关键帧dashb{
到{
行程偏移：-53.66；
}
}
手势
我使用了两次路径：
#a
和
#b
。
#a
和
#b
都有
笔划dasharray:1
但
#b
id偏移
笔划dashoffset:1

我正在为
#a
和
#b
设置
笔划dashoffset
的动画


使用{
笔划数组：1；
}
#a{
笔画：绿色；
动画：大沙5s线性无限；
}
#b{
笔划：暗绿色；
行程偏移：1；
动画：dashb 5s线性无限；
}
@关键帧dasha{
到{
行程偏移：-54.66；
}
}
@关键帧dashb{
到{
行程偏移：-53.66；
}
}
手势
SVG仍然比动画GIF慢一些/不太受支持。你确定要用它吗？最后当99%的世界将切换时，将会出现新的更酷的格式。是的，因为这是一个界面的一部分，它利用SVG功能来完成其任务（即悬停效果、对点击的反应、某些元素的工具提示等）。SVG仍然比动画GIF慢/少一些。你确定要用它吗？最后当99%的世界将切换时，将会出现新的更酷的格式。是的，因为这是一个界面的一部分，该界面利用SVG功能来完成其任务（即悬停效果、对点击的反应、某些元素的工具提示等）.您能否提供一些教程和文档的建议，以便更好地掌握基础知识并独立地综合这些解决方案？我设法使这个例子适应我的情况，但主要是通过反复试验，而不是清楚地了解我正在做什么。这本书是必须的：你能提供一些教程和文档的建议，以便更好地掌握基本原理并独立地综合这些解决方案吗？我设法使这个例子适应我的情况，但主要是通过反复试验，而不是清楚地了解我在做什么。这本书是必须的：