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

Understanding Animation/Physics/Math Implemention with EaselJS

本文关键字：物理 实现 动画 EaselJS 使用      更新时间：2023-09-26

这部分是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这里有一个位图对象，指向机器人图像。）

我从来都不是数学奇才，但我确实了解基本知识。我可以看到angle += 0.025;用于增加角度变量，以便传递到setTransform的值可以随时间变化。然而，我不明白为什么要使用a）0.025。b） （Math.sin（angle）*360）和的（（value）/360）+0.25意味着什么，以及c）为什么值不仅被传递到setTransform中，而且被2除（value/2）。

我知道在这里解释这可能是一个挑战，但任何帮助都是感激的。事实上，如果有人认为我是一个笨蛋，需要先去学习一些物理，我会非常感激有人能给我指一个资源（书/url）让我求助。

提前谢谢。

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

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

这里有一个稍微清晰的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();
    }

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再次取决于值。我们可以得出这样的结论：经过一些计算，每个刻度都会有一个变化的变换和scaleX。

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

希望这有帮助：-）

相关文章：