Javascript 平滑赌场轮子的动画
我正在使用html5开发一款基于赌场的游戏。动画工作正常,但不太平滑,即一旦车轮停止旋转,我移动球作为最终重新定位,以平滑过渡,但它不符合预期。完整的 BallResposition功能-在I轮停止移动后运行,以便最终重新定位球,从而为动画提供一些真实感Javascript 平滑赌场轮子的动画,javascript,html,canvas,Javascript,Html,Canvas,我正在使用html5开发一款基于赌场的游戏。动画工作正常,但不太平滑,即一旦车轮停止旋转,我移动球作为最终重新定位,以平滑过渡,但它不符合预期。完整的 BallResposition功能-在I轮停止移动后运行,以便最终重新定位球,从而为动画提供一些真实感 function ballReposition(){ curX = findNearestOnCircle(curX); if(curX > deadXRight){ sign = "-"; }else if(c
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);
}
函数重新定位(){
curX=findNearestOnCircle(curX);
如果(curX>deadXRight){
符号“-”;
}否则如果(curX 如果(BallRespositionInval要创建逼真的旋转车轮,可以使用对数ish方法来降低车轮的速度
这意味着每一帧的角度都会减少百分之几。当它是百分之几时,你会得到一个平滑的结束旋转(你也会注意到你得到了臭名昭著的旋转)
显示隔离的循环(请随意实施):
“继续循环”的阈值决定了您希望停止的程度。如果您希望车轮看起来更重(更重),您可以以更小的增量减小角度(例如,尝试0.998
)
要使球在周围弹跳,您需要借助物理建模,或者至少是伪物理建模。这包括车轮上所有小细节的碰撞检测,以及子时间步(光线投射)检查和z轴定位
我觉得这里的描述有点宽泛,但找到一篇关于碰撞检测和物理模拟的好文章。-您的配置错误。谢谢Shadow,更新了小提琴配置。您能帮我平滑动画吗?刚刚对动画进行了升级如果您想要更真实的行为,您必须模拟它:让球像真实的一样滚动和反弹。但是在你继续之前,你的代码需要重新设计。Vincent,你能再解释一下吗?谢谢Ken,我会试试这个
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);
}