Сглаживание анимации Казино Казино

Question

Я развиваю игру на основе казино, используя html5. Анимация работает нормально, но это не совсем гладко, то есть как только колесо останавливает вращение, я перемещаю шар как окончательное перепозиционирование, чтобы сгладить переход, но это не соответствует ожиданию. Завершить Code here

Функция BallReposition - работает после того, как я остановил движение колеса для окончательного изменения положения мяча, чтобы придать анимации некоторую реальность.

function ballReposition(){ 
curX = findNearestOnCircle(curX); 
if(curX > deadXRight){ 
     sign = "-"; 
    }else if(curX < deadXLeft){ 
     sign = "+"; 
    }  
    if(sign == "+"){ 
     curX = parseInt(curX) + ballRepositionIncVal; 
     curY = Math.floor(Math.abs(getYOnCircle(curX, 130, 1)) + 0.5);  
    }else{ 
     curX = parseInt(curX) - ballRepositionIncVal;   
     curY = Math.floor(Math.abs(getYOnCircle(curX, 130, 0)) + 0.5); 
    } 
    var xy = normalizeXY(curX, curY); 

    curX = parseInt(xy.split("-")[0]); 
    curY = parseInt(xy.split("-")[1]); 
    surface = document.getElementById("myCanvas"); 
    var surfaceContext = surface.getContext("2d"); 
    //removing older ball image. 
    surfaceContext.save(); 
    // Translate to the center point of our image 
    surfaceContext.translate(happy.width * 0.5, happy.height * 0.5); 
    // Perform the rotation 
    surfaceContext.rotate(DegToRad(angle)); 
    // Translate back to the top left of our image 

    surfaceContext.translate(-happy.width * 0.5, -happy.height * 0.5);    
    surface.getContext("2d").drawImage(happy, 0, 0); 
    surface.getContext("2d").drawImage(ball, curX, curY); 
    console.log(curX + curY); 
    surfaceContext.restore(); 

    ballRepositionIncVal-=5; 
    if(ballRepositionIncVal <= 0){ 
     clearInterval(myIntervalVar); 
    } 

}

Другие детали функции -

1. drawCanvas - загружает изображения и один раз загружаются изображения он начнет вызова функции цикла, которая будет вращать колесо и перемещать мяч в против часовой стрелки направление.
2. normalizeXY - используется для установки мяча на отдельные дискретные позиции, то есть правильные позиции ниже числа колес.

EDIT - Конфигурация Fiddle обновленного here

Answer 1

Чтобы создать реалистичную прялку вы можете использовать логарифмическую иш подход к уменьшению скорости колеса.

Это означает, что угол уменьшается на малый процент для каждого кадра. Так как это процентный показатель, вы получите гладкий конец вращения (вы также заметите, что получите пресловутый wagon wheel aliasing effect).

This online demo показывает цикл изоляции (реализации, как вы, пожалуйста):

var angle = 2;   /// start angle in radians 
ctx.translate(w, h); /// prepare canvas for rotation (w and h = 50%) 

ctx.globalAlpha = 0.67; /// optional bonus: motion blur(-ish) 
loop();     /// start loop 

function loop() { 

    ctx.rotate(a);  /// use incremental rotation 
    ctx.drawImage(img, -w , -h); 

    /// spin down and only loop if angle > certain value 
    a *= 0.995; 

    /// continue if there is enough "inertia" 
    if (a > 0.001) requestAnimationFrame(loop); 
} 

Пороговое значение для продолжения цикла определяет, как «брутальный» Вы хотите, чтобы остановить быть. Если вы хотите, чтобы колесо выглядело тяжелее (больше массы), вы можете уменьшить угол с еще меньшим приращением (например, попробуйте 0.998).

Для того чтобы мяч подпрыгнул, вам нужно прибегнуть к физическому моделированию или, по крайней мере, к псевдофизическому моделированию. Это включает в себя обнаружение столкновений для всех мелких деталей на колесе, а также проверку и позиционирование подпункта (лучевого литья) по оси z.

Я чувствую, что это немного широк, чтобы описать здесь на SO, но найти хорошую статью о обнаружении столкновений и физическом моделировании. Here is a good start with the basics.