javascript - 使用 EaselJS 理解动画/物理/数学实现

Question

这部分是 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() 是一个函数，它指示每个 tick 的 Action ，其间隔是用 setFPS 设置的。所以如果我将 FPS 设置为 20，那么 tick() 将执行它的语句一秒钟 20 次。我相信。bmp 这里是一个指向机器人图像的位图对象。)

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

我知道在这里解释这一点可能是一个挑战，但我们将不胜感激。事实上，如果有人认为我是菜鸟并且需要先学习一些物理知识，那么如果有人能为我指出资源(书籍/网址)供我引用，我将不胜感激。

提前致谢。

Answer 1

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

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

b) Math.sin(angle) 基本上从 0 开始，增加直到达到 1，减少直到达到 -1，然后增加回到 0 -- 整个周期为 10秒 sinusoidal rhythm .

(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？嗯，真的没有理由。

这里有一个更清晰的 tick 版本:

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

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

        stage.update();
    }