Question

我正在尝试使火车穿过一条倾斜的线。我已经生成了SVG页面，并且火车进行了相应的动画处理。但是，当火车到达终点时，它会翻转并向后退。

.largetrainpath{
    position: absolute;
    left: 37%;
    top: 670px;
    z-index: 99999999;
}


.largeTrain{
    motion-path: path("M1,3C64.3,24.3,127,47.5,189.8,70.1c1.8,0.7,2.6-2.2,0.8-2.9C127.8,44.6,65.1,21.4,1.8,0.1          C0-0.5-0.8,2.4,1,3L1,3z");
    offset-path: path("M1,3C64.3,24.3,127,47.5,189.8,70.1c1.8,0.7,2.6-2.2,0.8-2.9C127.8,44.6,65.1,21.4,1.8,0.1          C0-0.5-0.8,2.4,1,3L1,3z");
    transform: rotate(-20deg);
    motion-rotation: reverse;
    animation: move 3s linear;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    width: 94px;
    height: 43px;
    background: url(img/large-train.png) no-repeat;
    position: absolute;
    left: 35%;
    top: 654px;
    z-index: 99999999999;
}

@keyframes move {
100% { 
    motion-offset: 100%;
    offset-distance: 100%;
  }
}

有什么主意我可以如何防止火车翻转并自行返回？一旦到达行尾，我希望动画在此处停止。

谢谢

Answer 1

这是因为从开始到结束，您的路径都不是一行。相反，它是一个细长的矩形。路径从起点到终点，先转弯，然后再回到起点。

要解决此问题，请将路径修整到位直到右下角的“终点”。例如：

.largeTrain {
    motion-path: path("M1,3C64.3,24.3,127,47.5,189.8,70.1");
    offset-path: path("M1,3C64.3,24.3,127,47.5,189.8,70.1");
 }

SVG运动路径翻转问题

1 个答案: