旋轉車輪並停在畫架中的特定點

Question

我是EaselJs的新手。 我正在旋轉一個9x數字和3（0x）的輪子，總共12個數字。 我可以通過調用函數來旋轉輪子，但是我想在輪子的預定義特定點/編號上停止它。

var _oContainer;

this._init = function(iXPos,iYPos){
    _oWheel = s_oSpriteLibrary.getSprite("wheel_circle");
    _oContainer = new createjs.Container;
    _oContainer.x = CANVAS_WIDTH - 200;
    _oContainer.y = CANVAS_HEIGHT - 350;
    s_oStage.addChild(_oContainer);
    img = createBitmap(_oWheel);
    img.regX = _oWheel.width / 2;
    img.regY = _oWheel.height / 2;
    _oContainer.addChild(img);
}

this.spin = function(b, a){
    //var h = new createjs.Bitmap(s_oSpriteLibrary.getSprite('wheel_circle'));
    createjs.Tween.get(_oContainer).to({
        rotation: _oContainer.rotation + a
    }, 2600, createjs.Ease.quartOut).call(function() {
        _oContainer.rotation %= 360;
    })
}

我將自旋函數稱為this.spin(5, 1131.7511808994204); 在每次單擊按鈕上。

現在，它旋轉並在每次單擊按鈕時隨機停止。 如何將其停在輪子上的特定數字/位置上？

我應該給rotation:什么？

Answer 1

做這樣的事情有很多因素。 我做了一個快速演示，演示了如何做：

1. 分段繪制輪子（在中間）。 重要的是要知道您有多少段，以便您可以選擇一個“結束”的地方
2. 開始旋轉。 只需增加每個刻度的旋轉速度即可，具體取決於您希望旋轉的速度。
3. “停下來”時，您必須做數學運算才能確定着陸地點
4. 要獲得逼真的“減速”，請確保補間中的剩余旋轉足夠，以免加速或減速太快

這是小提琴： https : //jsfiddle.net/lannymcnie/ych1qt8u/1/

// Choose an end number. In this case, its just a number between 0 and the number of segments.
var num = Math.random() * segments | 0,

    // How many degrees is one segment? 
    // In my demo I use radians for `angle`, so I have to convert to degrees
    angleR = angle * 180/Math.PI,

    // Take the current rotation, add 360 to it to take it a bit further
    // Note that my demo rotates backwards, so I subtract instead of add.
    adjusted = c.rotation - 360,

    // Determine how many rotations the wheel has already gone since it might spin for a while
    // Then add the new angle to it (num*angleR)
    // Then add a half-segment to center it.
    numRotations = Math.ceil(adjusted/360)*360 - num*angleR - angleR/2;

然后我將補間動畫設置到新位置。 您可以盡情享受游戲的時長，輕松獲得喜歡的東西。

createjs.Tween.get(c)
    .to({rotation:numRotations}, 3000, createjs.Ease.cubicOut);

從技術上講，我應該根據實際剩余的旋轉來更改持續時間，因為根據結果，它可能不會非常平滑。 這足夠接近了，所以我保持原樣。

希望有幫助！ 讓我知道是否可以進一步澄清。