如何使用JavaScript为跟随移动元素绘制直线设置动画

所以我想在一个移动的元素后面画一条线

元素从屏幕的左下角开始，以凹曲线移动到右上角

我想在这个元素后面画一条虚线，就像这个元素是一支笔一样

这是一个JS提琴，应该描述我对运动图像等的意思。

上面的js是本文的一部分，因为我不能在不提供代码的情况下提交JSFIDLE链接

你认为解决这个问题的最佳方法是什么

编辑：元素将类似于飞机/火箭等，沿该曲线轻微旋转，比如沿飞行路径从45度旋转到0度，我希望虚线紧随其后。我的意思是：

谢谢。

你可以试试这个：

您可以尝试以下方法：

---

这有点接近我要找的。然而，我只是注意到我没有在我的问题中加入足够的细节。这个元素类似于一架飞机/火箭等，沿着曲线轻微旋转，比如说沿着飞行轨迹从45度到0度，我希望虚线跟随它。这就是我的意思：这有点接近我想要的。然而，我只是注意到我没有在我的问题中加入足够的细节。这个元素类似于一架飞机/火箭等，沿着曲线轻微旋转，比如说沿着飞行轨迹从45度到0度，我希望虚线跟随它。我的意思是：

$('.plane').animate({
  left: 300,
  top: [50, 'easeInQuad']
}, 1800); 

$( document ).ready(function() {
    $('.plane').animate({
        left: 300,
        top: [50, 'easeInQuad']
    }, 
    {
        duration: 5000,
        easing: 'swing',
        step: function( now, fx ) {

        },
        progress: function(fx, progress) {               
          var x=getOffset(fx.elem);
          var lineid=Math.round(progress * 100);
          if($("#"+lineid).length==0){         
              $(fx.elem).after("<span id='"+lineid+"' class='line' style='top:"+x.top+"px;left:"+x.left+"px;'>.</span>");
          }
        }
    }); 

  function getOffset( el ) {
      var _x = 0;
      var _y = 0;
      while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
          _x += el.offsetLeft - el.scrollLeft;
          _y += el.offsetTop - el.scrollTop;
          el = el.offsetParent;
      }
      return { top: _y, left: _x };
  }
});

.plane
{
  width:10px;
  height:10px;
  position: absolute;
  bottom:0px;
  background-color:black;
}
.line{
  position:absolute;
  font-size:20px;
}