1

在 Adob​​e XD 中，我有一条虚线路径（或线条）需要制作动画。在其他软件中，我总是通过为路径的虚线偏移（它的“相位”）设置动画来做到这一点。在 Adob​​e XD 中，此属性存在但不会通过用户界面公开。

我在插件 API 中进行了一些挖掘，发现Line和Path派生自GraphicNode，并且它们都具有strokeDashOffset属性。

我制作了一个快速插件，可以打印和设置这些值，使用以下内容：

function animateLineDashCommand(selection) {
    let linesAndPaths = selection.items.filter(el => el instanceof Path || el instanceof Line);

    linesAndPaths.forEach(el => {
        el.strokeDashOffset = 10; // Or whatever test value I'm using.
    });
}

这工作得很好，并且路径肯定会改变它的阶段。但是，如果我将同一条线放在具有不同相位的两个不同画板上，然后使用自动动画将它们连接在一起，则该属性将被忽略。我假设在幕后，这个属性没有被插值。

有谁知道让这个属性动画的方法和/或 Adob​​e XD 中路径偏移动画的替代解决方案？据我所知，动画 SVG 或GIF目前是不可能的。

谢谢。

更新 1： 我在组件内部尝试了手动逐帧方法，其中每个状态本质上是具有不同破折号阶段的帧。这个想法是让组件成为一个包含的时间线，以便动画可以在不同的画板上重复使用。但是，组件不支持Time触发器，这意味着它只能通过交互（单击、拖动等）进行转发。这种方法行不通。

更新 2： 由于画板确实可以访问Time触发器，因此我可以根据需要多次复制画板，并相应地设置每个包含路径的破折号阶段。这可行，但非常痛苦，因为它可能需要大量重复的画板，我想避免这种情况。在密集画板之间快速制作动画也会降低性能。

我制作了一个快速的 GUI 插件来简化此操作并将其上传到 GitHub。如果找到更好的解决方案，我会保留这个问题。

4

0 回答 0