旋转滚轮并在 EaselJs 中的特定点停止

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);

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

希望对您有所帮助！如果我能进一步澄清任何事情，请告诉我。