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はロボット画像を指すビットマップオブジェクトです。）

私は数学の魔法使いになったことがありませんが、基本は理解しています。setTransformに渡される値が時間とともに変化するように、角度変数angle += 0.025;を増やすために使用されていることがわかります。しかし、なぜa）0.025が使われているのか理解できません。b）（Math.sin（angle）* 360）および（（value）/ 360）+ 0.25の意味、およびc）値がsetTransformに渡されるだけでなく、2（value / 2）で除算される理由。

ここでこれを説明するのは難しいかもしれませんが、どんな助けでもありがたいです。実際、私が初心者で、最初に物理学を勉強する必要があると誰かが思った場合、誰かが私に頼るリソース（book / url）を教えてくれれば幸いです。

前もって感謝します。

4

2 に答える 2

2

なぜあなたが混乱しているのか理解できます。コードは効率的ではなく、何が起こっているのかを理解するのが難しくなります。しかし、ここにその要点があります：

a）0.025は約π/125であるため使用されます。ティッカー速度が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そこにあるので、ロボットは360度ではなく180度しか回転しません。私はあなたが何を考えているか知っています-なぜ1行後に2で割るだけで360を掛けるのですか？まあ、それは本当に理由はありません。

ティックの少し明確なバージョンは次のとおりです。

    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.

（回転した角度のコンテキストでは、つまり、左に1回転、または右に1回転します）。

setTransform関数が次のように存在することがわかります。

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

明らかに、値と角度の間に直接的な関係があることがわかります。さらにわかるのは、transformとscaleXの両方が再び値に依存していることです。各ティックには、いくつかの計算の後、変換とscaleXが変化するという結論を導き出すことができます。

したがって、変数'value'がパラメーターとして渡されるため、これは、値が示す限り（-360> = x> = 360）、'this'を回転させたいことを意味します。つまり、/2と0.025はこのように構成されています。

これがお役に立てば幸いです:-)

于 2012-07-13T11:54:31.643 に答える