Поверните колесо и остановитесь в определенной точке в EaselJs - PullRequest
Новая
       6

Поверните колесо и остановитесь в определенной точке в EaselJs

0 голосов
/ 13 сентября 2018

Я новичок в EaselJs. Я вращаю колесо с цифрами 9х и 3 (0х), всего 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:?

1 Ответ

0 голосов
/ 17 сентября 2018

Есть много факторов, чтобы сделать что-то подобное. Я сделал небольшую демонстрацию, чтобы показать, как я это сделаю:

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

Технически, я должен изменить продолжительность в зависимости от фактического оставшегося вращения, так как в зависимости от результата он может быть не очень плавным. Это было достаточно близко, поэтому я оставил все как есть.

Надеюсь, это поможет! Дайте мне знать, если я смогу что-то прояснить.

...