Math 解构谷歌地图smarty pins动画 更新

要简化正在发生的事情：

• 增加了四个按钮来移动斗杆，每个按钮在方向上增加值30
• 绘制x轴和y轴
• 红线是杆，底端坐标位于（ax，ay），顶端坐标位于（bx，by）
• 绿线（大概）是斗杆的先前位置，底端坐标位于（ax，ay），顶端坐标位于（bx0，by0）

所以，在吃了我的早餐之后。我对

未知函数a

和

未知函数b

看在大家的份上（你们两个），这是我到目前为止学到的东西

function unknownFunctionB(e) {
    var t = e.b.x - e.a.x
      , n = e.b.y - e.a.y
      , a = t * t + n * n;
    if (a > 0) {
        if (a == e.lengthSq)
            return;
        var o = Math.sqrt(a)
          , i = (o - e.length) / o
          , s = .5;
        e.b.x -= t * i * .5 * s,
        e.b.y -= n * i * .5 * s
    }
}

在上面的

未知函数b

中，变量

o

是红色座位的长度

还是不明白

什么是变量

i

，如何计算

（bx，by）

？基本上：

bx = bx - (bx - ax) * 0.5 * 0.5

by = by - (by - ay) * 0.5 * 0.5

在

未知函数a

中，那些神奇的数字

1.825

和

0.825

是什么

---

下面是无关紧要的 我正在尝试解构上使用的标记拖动动画

我已经设法获得了标记移动动画的相关代码，但我正在努力学习它是如何工作的，特别是两个函数（我命名为

unknownFunctionA

和

unknownFunctionB

）

这是smartypins网站上使用的StickModel类，据我所知未统一

function unknownFunctionA(e) {
    var t = 1.825
      , n = .825
      , a = t * e.x - n * e.x0
      , o = t * e.y - n * e.y0 - 5;
    e.x0 = e.x,
    e.y0 = e.y,
    e.x = a,
    e.y = o;
}

function unknownFunctionB(e) {
    var t = e.b.x - e.a.x
      , n = e.b.y - e.a.y
      , a = t * t + n * n;
    if (a > 0) {
        if (a == e.lengthSq)
            return;
        var o = Math.sqrt(a)
          , i = (o - e.length) / o
          , s = .5;
        e.b.x -= t * i * .5 * s,
        e.b.y -= n * i * .5 * s
    }
}

function StickModel() {
    this._props = function(e) {
        return {
            length: e,
            lengthSq: e * e,
            a: {
                x: 0,
                y: 0
            },
            b: {
                x: 0,
                y: 0 - e,
                x0: 0,
                y0: 0 - e
            },
            angle: 0
        }
    }
    (60)
}

var radianToDegrees = 180 / Math.PI;

StickModel.prototype = {
    pos: {
        x: 0,
        y: 0
    },
    angle: function() {
        return this._props.angle
    },
    reset: function(e, t) {
        var n = e - this._props.a.x
          , a = t - this._props.a.y;
        this._props.a.x += n,
        this._props.a.y += a,
        this._props.b.x += n,
        this._props.b.y += a,
        this._props.b.x0 += n,
        this._props.b.y0 += a
    },
    move: function(e, t) {
        this._props.a.x = e,
        this._props.a.y = t
    },
    update: function() {
        unknownFunctionA(this._props.b),
        unknownFunctionB(this._props),
        this.pos.x = this._props.a.x,
        this.pos.y = this._props.a.y;
        var e = this._props.b.x - this._props.a.x
          , t = this._props.b.y - this._props.a.y
          , o = Math.atan2(t, e);
        this._props.angle = o * radianToDegrees;
    }
}


StickModel.prototype.constructor = StickModel;

画布上具有示例实现的Fiddle链接：

再说一次，一切都按预期进行，我真的很想知道以下几点：

• unknownFunctionA

  和

  unknownFunctionB

  的理想名称是什么，并对其功能进行说明

• 未知函数a

  （1.825和.825）和

  未知函数b

  中的.5中的神奇数字是什么

• 未知函数b

  中的变量

  o

  似乎是斜边。如果是这样的话，那么到底什么是

  i=（o-e.length）/o

  ，换句话说，

  i=（斜边-粘贴长度）/斜边

---

我建议的第一件事是重命名所有这些变量和方法，直到它们开始有意义为止。我还删除了未使用的代码
振荡器 通过为跟随鼠标的斗杆创建新的位置值，向斗杆模型添加摆动
• 通过将其新位置乘以1.825，并将其先前位置的“回声”位置减去0.825，来放大其移动。在他们之间寻找一个中间点。氦使棍子直立
• 超调器减去欠调器必须等于1，否则你们的棍子会有方向问题。超过2.1的超调值往往使其永远不会稳定
seekerUpdate 根据鼠标位置更新导引头
• 距离_到_覆盖变量测量总移动的长度。你是对的：抵押（变量o）
• 比率变量计算可覆盖距离减去斗杆尺寸的比率。然后，该比率用于限制导引头在两个方向（x和y）上的更新调整。这就是应该应用多少更新来防止超出目标
• 放松会降低正确更新的速度
书中有许多与向量有关的有趣信息

功能振荡器（导引头）{
var超调器=1.825；
变量未知数=.825；
var氦=-5；
var new_seeker_x=超调器*导引头.x-欠调器*导引头.echo_x；
var new_seeker_y=超调*导引头.y-欠调*导引头.echo_y+氦；
seeker.echo_x=seeker.x；
seeker.echo_y=seeker.y；
seeker.x=新的seeker\ux；
seeker.y=新的seeker\u y；
}
功能seekerUpdate（斗杆）{
var dX=stick.seeker.x-stick.mouse_pos.x；
var dY=stick.seeker.y-stick.mouse_pos.y；
var距离_到_覆盖=Math.sqrt（dX*dX+dY*dY）；
var比率=（距离保护层-杆长）/距离保护层；
var=0.25；
杆式导引头x-=dX*比率*松弛；
杆式导引头y-=dY*比率*松弛；
}
函数StickModel（）{
此._props=函数（长度）{
返回{
长度：长度，
长度sq：长度*长度，
鼠标位置：{
x:0,，
y:0
},
搜索者：{
x:0,，
y:0-长度，
回声x:0，
回音y:0-长度
}
}
}(60)
}
StickModel.prototype={
移动：功能（x，y）{
这个._props.mouse_pos.x=x；
这个。_props.mouse_pos.y=y；
},
更新：函数（）{
振荡器（这是道具导引头）；
seekerUpdate（这是道具）；
}
};
StickModel.prototype.constructor=StickModel；
//绘制杆模型坐标的画布
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
canvas.width=window.outerWidth；
canvas.height=window.outerHeight；
var canvasCenterX=数学地板（canvas.width/2）；
var canvasCenterY=数学地板（canvas.height/2）；
翻译（canvasCenterX，canvasCenterY）；
var stickModel=新的stickModel（）；
draw（）；
setInterval（函数（）{
stickModel.update（）；
draw（）；
}, 16);
$（窗口）.mousemove（函数（e）{
var mouseX=（e.pageX-canvasCenterX）；
var mouseY=（e.pageY-游说中心）；
stickModel.move（mouseX，mouseY）；
stickModel.update（）；
draw（）；
});
函数绘图（）{
context.clearRect（-canvas.width，-canvas.height，canvas.width*2，canvas.height*2）；
//从（ax，ay）到（bx，by）的红线
context.beginPath（）；
context.strokeStyle=“#ff0000”；
移动到（stickModel.\u props.mouse\u pos.x，stickModel.\u props.mouse\u pos.y）；
lineTo（stickModel.\u props.seeker.x，stickModel.\u props.seeker.y）；
context.fillText（'mouse_pos x:'+stickModel.\u props.mouse_pos.x+'y:'+stickModel.\u props.mouse_pos.y，stickModel.\u props.mouse_pos.x，stickModel.\u props.mouse_pos.y）；
孔蒂