Javascript 获取动画jQuery Java脚本中移动的像素数

在jQuery JavaScript动画中，如何计算和显示一个div元素从起点（左下角）到当前点（用户单击按钮的任何点/时刻）沿另一个div（框）移动的像素数

[This is a very similar animation][1] 

[1]: https://jsfiddle.net/mykssutm/1/

这是css代码：

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

HTML代码：

第1栏
显示移动像素

JS代码：

<script type="text/javascript">

$(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:" + travaledPixels);
    });   


(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
        }, settings.duration, settings.easing);
    }, 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);

    </script>

$（窗口）。加载（函数（）{
变量$box=$（“#box”）；
var$circle=$box.find（“.circle”）.show（）；
var校准=0；
var=“swing”；
var持续时间=5000；
var CircleCenter={
x:$circle.width（）/2，
y:$circle.height（）/2
};
变量对齐={
x：对齐*圆中心x，
y：对齐*圆中心y
}
var path=$box.rectangularPath（align）；
$circle.animateOnPath({
起始点：路径[path.length-1]，
路径：路径，
热点：CircleCenter，
持续时间：持续时间，
放松：放松
}).promise（）.then（函数（））{
//当整个动画完成时
$circle.hide（）；
});
});
$（'#boton'）。单击（函数（）{
/*计算移动像素*/
警报（“移动像素：“+travaledPixels”）；
});   
（函数（$）{
var默认值={
startPoint:null，//动画开始前要设置的点
路径：[]，//任意数量（x，y）坐标的数组
热点：{x:0，y:0}，//相对于此点（左，上）的点将在路径上设置动画。
持续时间：400，//以毫秒为单位的时间***路径的每段***。
放松：“摇摆”
};
$.fn.animateOnPath=函数（选项）{
var=this，设置；
//如果（即（“：动画”））返回此；
设置=$.extend（{}，默认值，选项）；
if（settings.startPoint）{
//将此发送到起点
那.css（{
左：settings.startPoint.x-settings.hotspot.x，
顶部：settings.startPoint.y-settings.hotspot.y
});
}
//构建一个.animate（）链，每个步骤都是duration settings.duration路径的一个分支。
返回设置.path.reduce（函数（jq，point）{
返回jq.animate({
左：point.x-settings.hotspot.x，
顶部：point.y-settings.hotspot.y
}，settings.duration，settings.easing）；
}，即）；
}
})（jQuery）；
/* 
jQ.矩形路径（）
返回矩形路径的jQuery插件
*/
（函数（$）{
$.fn.rectangularPath=函数（对齐）{
align=align |{x:0，y:0}；
var=这个等式（0）；
返回[
{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）；

这里有一个解决方案。它可以计算沿任何方向移动的像素，例如，甚至沿对角线或曲线移动，而不限于演示中的水平和垂直移动方向

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

由于我还不清楚的原因，我不得不推迟开始计算累计行驶距离，直到前几次迭代之后。（请参阅包含

if（numberOfSteps<2）…

）的部分，否则初始距离为20多个像素，可能是由于某些操作将圆从其初始（不可见？）起始位置移动到矩形的左下角

var-dfd=$.Deferred（）；
var promise=dfd.promise（）；
var-currTop；
var currLeft；
var-prevTop；
左上角；
var-dist=0；
var numberOfSteps=0；
承诺.进展（职能（）{
var circlePosn=$（“.circle”）.position（）；
currTop=circlePosn.top；
currlefit=circlePosn.left；
如果（！prevTop）prevTop=currTop；
如果（！prevLeft）prevLeft=currLeft；
var x=当前左侧-当前左侧；
变量y=当前顶部-当前顶部；
如果（步骤数<2）{
步骤数+=1；
}否则{
距离+=数学sqrt（x*x+y*y）；
}
$（“#像素水平”）.text（“移动像素：+dist”）；
prevTop=currTop；
prevLeft=currLeft；
});
$（窗口）。加载（函数（）{
变量$box=$（“#box”）；
var$circle=$box.find（“.circle”）.show（）；
var校准=0；
var=“swing”；
var持续时间=5000；
var CircleCenter={
x:$circle.width（）/2，
y:$circle.height（）/2
};
变量对齐={
x：对齐*圆中心x，
y：对齐*圆中心y
}
var path=$box.rectangularPath（align）；
$circle.animateOnPath({
起始点：路径[path.length-1]，
路径：路径，
热点：CircleCenter，
持续时间：持续时间，
放松：放松
}).promise（）.then（函数（））{
//当整个动画完成时
$circle.hide（）；
});
});
$（'#boton'）。单击（函数（）{
/*计算移动像素*/
警报（“移动像素：+dist”）；
});
（函数（$）{
var默认值={
startPoint:null，//动画开始前要设置的点
路径：[]，//任意数量（x，y）坐标的数组
热点：{
x:0,，
y:0
}，//将在路径上设置动画的相对于该点（左，上）的点。
持续时间：400，//以毫秒为单位的时间***路径的每段***。
放松：“摇摆”
};
$.fn.animateOnPath=函数（选项）{
var=这个，
设置；
//如果（即（“：动画”））返回此；
设置=$.extend（{}，默认值，选项）；
if（settings.startPoint）{
//将此发送到起点
那是.css({
左：settings.startPoint.x-settings.hotspot.x，
顶部：settings.startPoint.y-settings.hotspot.y
});
}
//构建一个.animate（）链，每一步都是一条腿
<script type="text/javascript">

$(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:" + travaledPixels);
    });   


(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
        }, settings.duration, settings.easing);
    }, 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);

    </script>