旋转轮子并在 EaselJs 中的特定点停止答案

【问题标题】：Rotate wheel and stop at specific point in EaselJs旋转轮子并在 EaselJs 中的特定点停止
【发布时间】：2018-09-18 01:40:02
【问题描述】：

我是 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;
    })
}

每次单击按钮时，我都将 spin 函数称为 this.spin(5, 1131.7511808994204);。

现在它会在每次点击按钮时随机旋转和停止。如何将其停在车轮上的特定数字/位置？

我应该在rotation: 中给出什么值？

【问题讨论】：

标签： javascript createjs easeljs

【解决方案1】：

做这样的事情有很多因素在起作用。我做了一个快速演示来展示我将如何做到这一点：

用线段绘制轮子（在中心）。重要的是要知道你有多少段，这样你就可以选择一个“结束”的地方
开始旋转。只需根据您想要的速度增加每个刻度的旋转。
“停止”时，您必须进行数学计算以确定降落的位置
要获得逼真的“减速”效果，请确保补间中剩余的旋转足够，以免加速或减速过快

这里是小提琴：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);

从技术上讲，我应该根据实际剩余的旋转来更改持续时间，因为根据结果，它可能不会超级流畅。这已经足够接近了，所以我保持原样。

希望对您有所帮助！让我知道是否可以进一步澄清。

【讨论】：