如何使用JavaScript为动画元素绘制线条动画

Question

所以，我想绘制一个移动元素后面的线条。

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

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

这里是一个JS提琴应该描述一下我的意思是关于运动图像等 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; 
}