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

如何使用JavaScript动画绘制移动元素后面的一行

1 个答案: