获取动画 jQuery Java 脚本中行进的像素数

这是一个解决方案。它可以计算沿任何方向行进的像素，例如沿对角线或曲线，而不受演示中的水平和垂直行进方向的限制。

我对承诺相对较新，所以我不能保证我已经正确和/或完整地制定了所有代码，但它给出了预期的结果。

由于我还无法弄清楚的原因，我不得不推迟开始计算累积行驶距离，直到前几次迭代之后。(请参阅包含if (numberOfSteps < 2) ...的部分。否则，在开始时添加了大约 20 像素的初始距离，可能是由于一些操作将圆从其初始(不可见？(起始位置移动到矩形的左下角。

var dfd = $.Deferred();
var promise = dfd.promise();
var currTop;
var currLeft;
var prevTop;
var prevLeft;
var dist = 0;
var numberOfSteps = 0;
promise.progress(function() {
  var circlePosn = $(".circle").position();
  currTop  = circlePosn.top;
  currLeft = circlePosn.left;
  if (!prevTop ) prevTop  = currTop;
  if (!prevLeft) prevLeft = currLeft;
  var x = currLeft - prevLeft;
  var y = currTop  - prevTop;
  if (numberOfSteps < 2) {
    numberOfSteps += 1;
  } else {
    dist += Math.sqrt(x * x + y * y);
  }
  $("#pixelsTraveled").text("pixels traveled: " + dist);
  prevTop = currTop;
  prevLeft = currLeft;
});
$(window).load(function() {
  var $box = $("#box");
  var $circle = $box.find(".circle").show();
  var alignment = 0;
  var easing = "swing";
  var duration = 5000;
  var circleCentre = {
    x: $circle.width() / 2,
    y: $circle.height() / 2
  };
  var align = {
    x: alignment * circleCentre.x,
    y: alignment * circleCentre.y
  }
  var path = $box.rectangularPath(align);
  $circle.animateOnPath({
    startPoint: path[path.length - 1],
    path: path,
    hotspot: circleCentre,
    duration: duration,
    easing: easing
  }).promise().then(function() {
    // when the whole animation is complete
    $circle.hide();
  });
});
$('#boton').click(function() {
  /* calculate traveled pixels */
  alert("Traveled pixels:" + dist);
});
(function($) {
  var defaults = {
    startPoint: null, // the point to which this is to be set before the   animation begins
    path: [], // an array of any number of (x,y) coordinates
    hotspot: {
      x: 0,
      y: 0
    }, // the point relative to this's (left,top) that will be animated on the path.
    duration: 400, // time in milliseconds ***per leg*** of the path.
    easing: 'swing'
  };
  $.fn.animateOnPath = function(opts) {
    var that = this,
      settings;
    // if(that.is(":animated")) return this;
    settings = $.extend({}, defaults, opts);
    if (settings.startPoint) {
      //send this to start point
      that.css({
        left: settings.startPoint.x - settings.hotspot.x,
        top: settings.startPoint.y - settings.hotspot.y
      });
    }
    // build an .animate() chain, each step of which is one leg of the    path  of duration settings.duration.
    return settings.path.reduce(function(jq, point) {
      return jq.animate({
        left: point.x - settings.hotspot.x,
        top: point.y - settings.hotspot.y
      }, {
        duration: settings.duration,
        easing: settings.easing,
        progress: function(promise, progress) {
          dfd.notify(progress);
        }
      });
    }, that);
  }
})(jQuery);
/* 
jQ.rectangularPath()
A jQuery plugin that returns a rectangular path 
*/
(function($) {
  $.fn.rectangularPath = function(align) {
    align = align || {
      x: 0,
      y: 0
    };
    var that = this.eq(0);
    return [{
      x: that.width() + align.x,
      y: that.height() + align.y
    }, {
      x: that.width() + align.x,
      y: -align.y
    }, {
      x: -align.x,
      y: -align.y
    }, {
      x: -align.x,
      y: that.height() + align.y
    }];
  }
})(jQuery);

#box {
  top: 20px;
  left: 20px;
  width: 300px;
  height: 500px;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 10px #909090;
  -moz-box-shadow: 0px 0px 10px #909090;
  box-shadow: 0px 0px 10px #909090;
  margin: 20px;
}
.circle {
  position: relative;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: #66d9ff;
  background: -moz-linear-gradient(bottom, #00bfff, #ccf2ff);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00bfff), to(#ccf2ff));
  background: -webkit-linear-gradient(bottom, #00bfff, #ccf2ff);
  background: -ms-linear-gradient(bottom, #00bfff, #ccf2ff);
  background: -o-linear-gradient(bottom, #00bfff, #ccf2ff);
  border: 5px solid #ffffff;
  box-shadow: 0px 0px 15px #909090;
  -moz-box-shadow: 0px 0px 15px #909090;
  -webkit-box-shadow: 0px 0px 15px #909090;
  -o-box-shadow: 0px 0px 15px #909090;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pixelsTraveled"></div>
<div id="notes"></div>
<div class="col-xs-12 col-md-6">
  <h2>Column 1</h2>
  <div id="box" class="box track-box">
    <div class="circle"></div>
  </div>
  <button id="boton" class="btn btn-primary">Show traveled pixels</button>
</div>