2

解決済み -

正弦波の角度に従って回転するように画像をアニメーション化しようとしています - 正弦波は jQuery.path プラグインを使用して作成されます。

問題はスムーズな回転を得ることにあります。

私は現在、回転に jQuery 回転プラグインを使用していますが、現在のところ、滑らかな回転を作成していません。

JavaScript と jQueryについては、 http://hellosmithers.com/GNU/STALLMANQUEST.htmlを参照してください。

スクリプトは比較的多くコメントされています。

現在、回転は繰り返されるだけで、完了するまでに一定の時間がかかります。これは、正弦波が完了するのに時間がかかるため、すべての画面サイズでは機能しないことを意味します。

function mRot() { // image rotation - it goes from rA[0] (-8 degrees) to rA[1] (8 degrees) then swaps the values
    // flip the values in rA - making the rotation oposite each iteration of this funciton
    rA[1] = [rA[0], rA[0] = rA[1]][0];
    $("#rmat").rotate({
        duration: 1700,
        angle: rA[0],
        animateTo: rA[1],
        callback: mRot
    }); // I would like to remove this function - instead tying the rotation into the sine wave function somehow
}

正弦波は次のように作成されます。

SineWave = function() { // create the sine wave - as per https://github.com/weepy/jquery.path
    this.css = function(p) {
        s = Math.sin(p * 12);
        x = winWidth - p * (winWidth + 250);
        y = s * 40 + (winHeight - 440);
        return {top: y + "px", left: x + "px"};
    }
}

ありがとう

4

1 に答える 1

3

私はそれを理解しました-角度はpから導出され、使用しました ( p * 12 )-

SineWave = function() {
    this.css = function(p) {
        rA[0] = p * 12; // get the angle
        s = Math.sin(p * 12);
        x = winWidth - p * (winWidth + 250);
        y = s * 40 + (winHeight - 440);
        return {top: y + "px", left: x + "px"};
    }
}

関数 mRot は rA を使用します -

function mRot() {
    rA[0] = prA[1]; // rA[0] will always be the previous rA[1]
    if (prA[1] < 0) rA[1] = Math.abs(rA[1]); // if the previous rA[1] is a negative number, make the current rA positive.
    else rA[1] = -(rA[1]); // otherwise make it negative
    prA = rA;
    $("#rmat").rotate({
        duration: 1500,
        angle: rA[0],
        animateTo: rA[1],
        callback: mRot
    });
}

配列変数を確実に宣言する -

rA = new Array (-8, 8);
prA = rA[1] = [rA[0], rA[0] = rA[1]][0];

完全なコードを見たい場合は、http://hellosmithers.com/GNU/STALLMANQUEST.htmlにアクセスしてください。

于 2013-11-05T04:37:05.213 に答える