javascript - 如何使用 JavaScript 以动画方式绘制跟随移动元素的线条

Question

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

该元素从屏幕左下角开始，沿凹曲线移动到右上角。

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

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

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

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

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

编辑:该元素将类似于飞机/火箭等，沿着该曲线稍微旋转，例如沿着飞行路径从 45 度旋转到 0 度，我希望虚线跟随它。我的意思是: /image/gc4oP.jpg

谢谢。

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