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）为什么 value 不只是传递到 setTransform ，而是除以2（ value / 2 ）。

我知道在这里解释这可能是一个挑战，但任何帮助都表示赞赏。事实上，如果有人认为我是菜鸟并且需要先去学习一些物理，我会非常感激，如果有人可以指点我的资源（书/网址）让我转向。

提前致谢。

Answer 1

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

a）使用0.025因为它大约是π/ 125。当Ticker速度为25FPS时，这意味着角度值将从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行？嗯，没有理由真的。

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

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

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

        stage.update();
    }

Answer 2

b）Math.sin（角度）* 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) {}

显然，我们可以看到价值与价值之间存在直接联系。角度。我们进一步看到的是变换和变换。 scaleX再次依赖于价值。我们可以得出这样的结论：每次滴答都会在一些计算之后 - 变化的变换和尺度X。

因此，当变量'value'作为参数传递时，这意味着我们希望旋转'this'，就像值告诉我们的那样（-360＆gt; = x＆gt; = 360）。这意味着，/ 2和0.025就是这样配置的。

希望这有用： - ）

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

2 个答案: