Question

我对SVG文件几乎一无所知，但是必须使用一个来绘制一条线来指示一条路线（我不太了解画布以使其成为一个选项）。

我找到了一些例子并设法实现了我所追求的目标，但事实证明这条线需要从右向左移动。

我从Illustrator导出路径，但不知道如何反转它们。有没有办法可以扭转动画？

Answer 1

SVG文件的相关部分：

<path id="busTrack2" ...>
  <animate id="dashAnim2" attributeName="stroke-dashoffset" from="0" 
   to="0" dur="10s" begin="0" fill="freeze" keySplines="0 0.5 0.5 1" 
   calcMode="spline"/>
</path>

Javascript代码：

var busTrack = document.getElementById('busTrack2');
var busTrackAnim = document.getElementById('dashAnim2');
var trackLength = busTrack.getTotalLength().toString();
busTrack.setAttribute('stroke-dasharray',trackLength+','+trackLength);
// forward: 
// busTrackAnim.setAttribute('values',trackLength+';0');
// backward:
busTrackAnim.setAttribute('values','-'+trackLength+';0');

Answer 2

要反转路径方向，您需要在Illustrator中编辑路径文件。 SVG路径是方向性的。路径标记描述了它们的起始位置以及它们移动到的位置。（它非常冗长，但也非常强大。）

在Illustrator中，使用直接选择工具选择路径，然后选择钢笔工具，并单击要作为动画路径的端点（总线“停止”）的内容。它在屏幕上看起来完全一样，但方向会相反。重新保存文件并将其交换出来。然后动画的stroke-dashoffset会反过来。

Answer 3

这绝对是可能的，除了你需要一种方法来确定“笔”在一系列操作之后的位置，因为你需要弄清楚它完成绘制的位置以追溯它的步骤。向后动画SVG涉及以下内容：

将SVG分解为由绝对运动分隔的分量曲线，并计算出它们的端点。至少，您有一条具有单个端点的连续线。您需要向前播放曲线以计算其最终位置。
向后播放命令。在大多数情况下，这是微不足道的。需要回溯（+ x，+ y）的行（-x，-y）。具有端点（x1，y1）和控制点（x2，y2）的曲线需要作为具有端点（y1，x1）和控制点（y2，x2）的曲线回溯。每个命令都相反。

一旦你得到了它，只需要向后播放每个组件。困难的部分只是确定每个组件的最终位置。基本上，您需要向前播放每个组件而不绘制。有很多开源图形库可以帮助您解决这个问题。如果您发现自己编写代码来计算Bezier曲线的终点，那么您看起来就不够了。

如何在SVG中反转动画线

3 个答案: