0

我正在使用基于打字稿的 React 传单的两个位置创建折线。我想制作从源到目的地的动画。它应该看起来像在源到目的地之间流动的东西。我可以设置动画CSS Animation但是，我有一个问题，即最后一种颜色（黄色为 100%）和返回初始位置（蓝色为 0%）之间的过渡非常突然，不像其他变化那样平滑之间。我希望最后的更改也像其他更改一样平滑，使其看起来像一个连续的流程。谁能帮我解决这个问题？这是我的代码，

反应传单折线

<Polyline 
    key={eachConnection.id} 
    weight={4}
    className="water-flow"
    positions={[[source.lat, source.long],[target.lat, target.long]]}
    
    />

折线的 CSS

.water-flow{
  stroke: lime;
  stroke-width: 3;
  animation: 3s ease infinite Anim;
}


@keyframes Anim {
  0%{
    stroke : blue;
  }

  2%{
    stroke: green;
  }

  50%{
    stroke: red;
  }

  98%{
    stroke: cyan;
  }
  
  100%{
    stroke: yellow;
  }
}
4

0 回答 0