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上的操作，其间隔是通过setFPS设置的。所以如果我将FPS设置为20，那么tick()将执行它的语句一秒 20 次。我相信。这里的 bmp 是一个指向机器人图像的 Bitmap 对象。)

我从来都不是数学奇才，但我确实了解基础知识。我可以看到 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();
    }