2

这部分是 EaselJS 问题，部分是物理/动画编程问题。

我正在尝试通过研究 EaselJS zip 文件中包含的示例来学习 EaselJS。现在，我正在查看 SimpleTransform 示例（http://bit.ly/LebvtV），其中机器人旋转并淡入背景并向前景扩展。我觉得这个效果真的很酷，并且想学习如何实现它。但是，当我来到这组代码时，我迷失了：

function tick() {
angle += 0.025;
var value = (Math.sin(angle) * 360);
bmp.setTransform (bmp.x , bmp.y , bmp.scaleX , bmp.scaleY , value/2 , bmp.skewX, bmp.skewY , bmp.regX , bmp.regY );
bmp.scaleX = bmp.scaleY = ((value)/360) + 0.25;
stage.update();
}

（对于那些不熟悉 EaselJS 的人，tick() 是一个函数，它指示每个刻度上的动作，其间隔由 setFPS 设置。因此，如果我将 FPS 设置为 20，那么 tick() 将执行其语句 20 次一秒钟。我相信。这里的bmp是一个指向机器人图像的 Bitmap 对象。）

我从来不是数学方面的巫师，但我确实了解基础知识。我可以看到它angle += 0.025;用于增加角度变量，以便传递给setTransform的值可以随时间变化。但是，我不明白为什么使用 a) 0.025。b) (Math.sin(angle) * 360)和((value)/360) + 0.25是什么意思，以及 c) 为什么value不只是传递给setTransform，而是除以 2 ( value/2 )。

我知道在这里解释这一点可能是一个挑战，但感谢任何帮助。事实上，如果有人认为我是菜鸟并且需要先学习一些物理学，如果有人能指出我的资源（书/网址）供我参考，我将不胜感激。

提前致谢。

4

2 回答 2

2

我能理解你为什么感到困惑。代码效率不高，这使得弄清楚发生了什么变得更加困难。但这里是它的要点：

a)0.025被使用是因为它大约是 π/125。对于 25FPS 的 Ticker 速度，这意味着角度值将从 0 开始并在大约 5 秒内达到 π。使用 π 是因为 Math.sin 使用弧度，而不是度数（π 弧度 == 180 度）

b)Math.sin(angle)将基本上从 0 开始，增加直到达到 1，减少直到达到 -1，然后再增加回 0——在 10 秒的时间内以正弦节奏进行。

(Math.sin(angle) * 360)具有与 相同的行为Math.sin(angle)，只是范围为 -360 到 360。

((value)/360) + 0.25)具有与 相同的行为Math.sin(angle)，只是范围为 -0.75 到 1.25。

c)value/2在那里，机器人只旋转 180 度而不是 360 度。我知道你在想什么——为什么乘以 360 只在一行之后除以 2？好吧，真的没有理由。

这是一个更清晰的刻度版本：

    function tick() {
        angle += Math.PI/125;
        var sineValue = Math.sin(angle);

        bmp.rotation = sineValue * 180;
        bmp.scaleX = bmp.scaleY = sineValue + 0.25;

        stage.update();
    }
于 2012-07-13T12:01:36.863 回答
1

b) Math.sin(angle)*360 似乎是度数和弧度之间的转换。

Math.sin( x ) always evaluates to -1>=x>=1,

因此

Math.sin( angle ) is  also always -1>=angle>=1

（我们只是替换了 x），并且

var value = Math.sin( angle ) * 360 is always -360>=value>=360.

（在旋转度数的上下文中，因此向左旋转一整圈或向右旋转一整圈）。

我们可以看到setTransform函数存在如下：

p.setTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {}

显然，我们可以看到价值和角度之间存在直接联系。我们进一步看到的是，transform 和 scaleX 都再次取决于值。我们可以得出这样的结论，即每个刻度都会有 - 经过一些计算 - 变化的变换和 scaleX。

因此，当变量“value”作为参数传递时，这意味着我们希望旋转“this”，就像 value 告诉我们的一样多 (-360>=x>=360)。也就是说，/2 和 0.025 就是这样配置的。

希望这会有所帮助:-)

于 2012-07-13T11:54:31.643 回答