第18天:如何用SVG制作路径动画

671 阅读1分钟

路径的另一个有趣用法是创建动画路径。这种方法不仅仅适用于SVG。我们在这里使用的是 offset-path CSS属性,它也适用于任何其他HTML元素。如果检查这个属性的值,就会发现定义路径的方式与SVG相同。

首先,我们有轨道。我们把它定义为一条路径。

image.png

然后我们有一个雪橇,它是由两条不同的路径组合在一起制成的。

这两者本身都不是很有趣。我们可以添加一个动画,其中动画路径与轨道的路径相同。动画路径只是略有不同。

默认情况下,雪橇的中下部分将沿着路径移动,它的开始和结束部分将略微沉入路径中。相反,改变路径,在一些急转弯时稍微抬高雪橇。