如何使用JavaScript使图像在自定义路径上移动？

我想沿特定路径移动箭头。我知道我必须应用CSS翻译来移动箭头，但我有一个问题

箭头需要向下移动，然后向左移动，然后向上移动，直到它到达起始位置的同一水平平面，但位于其初始位置的左侧

我可以把它移下来，这是第一步。但是如果我使用所有三种平移方法，它会直接将其带到最终位置，而不遵循路径。我尝试将三个translate方法及其转换放在单独的函数中，并在前一步的末尾调用每个函数，但结果是相同的

以下是HTML：

<div>
<img src="img/arwTest.png" alt="Click to rotate" id="arrow">
<img src="img/moveTest_2.png" alt="demonstration" id="demo">
<p>Click anywhere to move the arrow along the path.</p>
</div>

下面是JavaScript：

const arrow = document.getElementById("arrow");
arrow.style.transform = `rotate(90deg)`;

addEventListener('click', () => {
arrow.style.transform = `translate(0px,200px)`;
arrow.style.transition = `2s`;
})

---

整个过程。

我相信您正在寻找css语句和css属性：

@关键帧运动{
0.000%{左：30%；顶：70%；}
33.33%{左：70%；顶：70%；}
66.66%{左：50%；顶：30%；}
100.0%{左：30%；顶：70%；}
}
html，正文{
位置：绝对位置；
宽度：100%；高度：100%；
左：0；上：0；
边距：0；填充：0；
}
.点{
位置：绝对位置；
宽度：20px；高度：20px；
左侧边距：-10px；顶部边距：-10px；
边界半径：100%；
背景色：#500000；
动画：运动2000ms无限线性；
}

---

一个新的CSS属性可以帮助您实现这一点

这是偏移路径

请参见代码片段中如何将其用于请求的移动

将容器悬停以激活它

另外，请注意，在堆栈溢出中，需要发布代码示例。即使它不起作用

#容器{
宽度：400px；
高度：150像素；
边框：点黑色5px；
利润率：30像素；
}
#动作演示{
宽度：40px；
高度：40px；
背景：青色；
偏移路径：路径（'M400 0 v 150 h-400 v-150'）；
偏移距离：0%；
过渡：偏移距离2s；
}
#容器：悬停#运动演示{
偏移距离：100%；
}

将您的代码作为一个主题发布在问题中，这太棒了。非常感谢。

const arrow = document.getElementById("arrow");
arrow.style.transform = `rotate(90deg)`;

addEventListener('click', () => {
arrow.style.transform = `translate(0px,200px)`;
arrow.style.transition = `2s`;
})