平滑赌场轮盘的动画

Question

我正在使用 html5 开发一个基于赌场的游戏。动画工作正常，但不太平滑，即一旦轮子停止旋转，我就会移动球作为最终的重新定位以平滑过渡，但它没有达到预期。在此完成代码

BallReposition 函数 - 在 I 轮停止移动后运行，以最终重新定位球，为动画提供一些真实感。

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 - 用于将球放置在一些离散位置，即轮数下方的适当位置。

编辑 - 小提琴配置已更新此处

Answer 1

要创建逼真的旋转轮，您可以使用对数方法来降低轮子的速度。

这意味着每帧角度都会减少一个小百分比。由于它是百分比，因此您将获得平滑的结束旋转（您还会注意到您获得了臭名昭著的马车车轮锯齿效果）。

这个在线演示显示了隔离的循环（根据您的喜好实现）：

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 轴上的子时间步长（射线投射）检查和定位。

我觉得在这里描述有点宽泛，但是找到一篇关于碰撞检测和物理模拟的好文章。 这是基础知识的良好开端。

Answer 2

Не упустіть шанс на неймовірні виграші та захоплення！ Приєднуйтесь до спільноти гравців на 1win сьогодні, і ви отримаєте можливість відчути справжню радість гри!