如何使用 JavaScript 动画绘制跟随移动元素的线

Question

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

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

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

这是一个 JS fiddle，应该描述我对运动图像等的意思。 https://jsfiddle.net/jn9za5ez/8/

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

上面的js是帖子的一部分，因为不提供代码我无法提交jsfiddle链接...

您认为解决此问题的最佳方法是什么？

编辑：该元素将类似于沿该曲线略微旋转的飞机/火箭等，例如沿飞行路径从 45 度到 0 度，我希望虚线跟随它。这就是我的意思： http://imgur.com/a/z37m2

谢谢。

Answer 1

你可以试试这个：jsfiddle.net/bharatsing/jn9za5ez/16/

$( 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;
}