我需要用Javascript减缓轮盘赌的旋转

我有一个家庭作业，我必须在没有插件的情况下用javascript编写轮盘赌转轮代码，我需要在编写此代码之前满足一些条件 clearTimeout（spinTimeout）
但我不知道如何编码轮盘赌旋转的减速。 最后一个问题，我需要用颜色数组在轮盘赌中随机选择颜色

这是我的密码：

var prize=[“prize1”、“prize2”、“prize3”、“prize4”，
“prize5”、“prize6”、“prize7”、“prize8”，
“第9”、“第10”、“第11条”、“第12条”]；
var-startAngle=0；
var arc=Math.PI/6；
var spinTimeout=null；
var spinArcStart=10；
var spinTime=0；
var-ctx；
var x=100；
var i=30；
自旋功率=假；
函数Random_Color（）
{
变量颜色=[“C137BD”、“D74C76”、“BD3B47”、“DC4345”、“F69939”，
“FCC334”、“D3DC5D”、“5DDF67”、“3ABF32”、“3DA053”，
“3DA0A0”、“5A7CC3”、“5792EE”、“6E4ECE”、“B53CB1”
];
var random_color=colors[Math.floor（Math.random（）*colors.length）]；
返回随机颜色；
}
函数绘图（）{
drawRouletteWheel（）；
}
函数DrawRouletWheel（）{
var canvas=document.getElementById（“wheelcanvas”）；
if（canvas.getContext）{
var=200；
var textRadius=160；
var insideRadius=125；
ctx=canvas.getContext（“2d”）；
ctx.clearRect（0,0500）；
ctx.strokeStyle=“黑色”；
ctx.lineWidth=2；
ctx.font='bold 15px sans serif'；
对于（变量i=0；i<12；i++）{
var角度=星形缠结+i*弧；
ctx.fillStyle=Random_Color（）；
ctx.beginPath（）；
ctx.弧（250，250，半径，角度，角度+弧，假）；
ctx.弧（250，250，内半径，角+弧，角，真）；
ctx.stroke（）；
ctx.fill（）；
ctx.save（）；
ctx.shadowOffsetX=-1；
ctx.shadowOffsetY=-1；
ctx.shadowBlur=0；
ctx.shadowColor=“rgb（220220）”；
ctx.fillStyle=“黑色”；
ctx.translate（250+数学cos（角度+圆弧/2）*文本半径，250+数学sin（角度+圆弧/2）*文本半径）；
ctx.旋转（角度+圆弧/2+数学PI/2）；
var text=奖品[i]；
ctx.fillText（text，-ctx.measureText（text）.width/2，0）；
ctx.restore（）；
} 
//箭
ctx.fillStyle=“黑色”；
ctx.beginPath（）；
ctx.moveTo（250-4250-（Adius+5））；
ctx.lineTo（250+4250-（半径+5））；
ctx.lineTo（250+4250-（adius-5））；
ctx.lineTo（250+9250-（adius-5））；
ctx.lineTo（250+0250-（adius-13））；
ctx.lineTo（250-9250-（Adius-5））；
ctx.lineTo（250-4250-（Adius-5））；
ctx.lineTo（250-4250-（半径+5））；
ctx.fill（）；
}
}
函数自旋（）{
SpingleStart=Math.random（）*10+10；
自旋时间=0；
spinTimeTotal=Math.random（）*3+4*1000；
旋转车轮（）；
}
函数rotateWheel（）{
var spinAngle=spinAngleStart-easeOut（自旋时间，0，spinAngleStart，SpinangleTotal）；
startAngle+=（spinAngle*Math.PI/180）；
DrawRouletWheel（）
x--；
spinTimeout=setTimeout（'rotateWheel（）'，x）；
如果（x听起来像是你在谷歌上搜索了一个缓解功能，却不知道如何使用它。

罗伯特·彭纳（Robert Penner）的一组出色的放松功能可以在这里找到：


下面是使用Penner缓和函数的快速课程

这些是Penner缓和函数的参数：

// d: total duration (==# steps desired to complete the animation)
// t: current step# inside duration, 
// b: beginning value,
// c: total change from beginning value,

// b == the beginning value
// start your wheel at 0 angle
var b=0; 

// c == the total change that will occur to the beginning value
// spin the wheel one full rotation (PI*2) plus a random final angle (Math.random()*PI*2)
var PI2=Math.PI*2;
var c=PI2+Math.random()*PI2;

// d == duration == the number of loops desired to complete the animaton
// have the spin take 120 animation loops to complete
// If each animation loop is 1/60th second then the full animation takes 2 seconds
var d=120;

// t == the current step of the animation
var t=0; // start at step#0
// each loop will advance "t" towards "d"
t++;  // make t advance towards d 

您可以这样设置参数：

// d: total duration (==# steps desired to complete the animation)
// t: current step# inside duration, 
// b: beginning value,
// c: total change from beginning value,

// b == the beginning value
// start your wheel at 0 angle
var b=0; 

// c == the total change that will occur to the beginning value
// spin the wheel one full rotation (PI*2) plus a random final angle (Math.random()*PI*2)
var PI2=Math.PI*2;
var c=PI2+Math.random()*PI2;

// d == duration == the number of loops desired to complete the animaton
// have the spin take 120 animation loops to complete
// If each animation loop is 1/60th second then the full animation takes 2 seconds
var d=120;

// t == the current step of the animation
var t=0; // start at step#0
// each loop will advance "t" towards "d"
t++;  // make t advance towards d 

要制作动画：

// d: total duration (==# steps desired to complete the animation)
// t: current step# inside duration, 
// b: beginning value,
// c: total change from beginning value,

// b == the beginning value
// start your wheel at 0 angle
var b=0; 

// c == the total change that will occur to the beginning value
// spin the wheel one full rotation (PI*2) plus a random final angle (Math.random()*PI*2)
var PI2=Math.PI*2;
var c=PI2+Math.random()*PI2;

// d == duration == the number of loops desired to complete the animaton
// have the spin take 120 animation loops to complete
// If each animation loop is 1/60th second then the full animation takes 2 seconds
var d=120;

// t == the current step of the animation
var t=0; // start at step#0
// each loop will advance "t" towards "d"
t++;  // make t advance towards d 

创建一个动画循环（最好是
requestAnimationFrame
，但如果必须的话，
setTimeout
）
计算当前值：
var currentAngle=someEasing（t，b，c，d）
绘制以
当前角度旋转的车轮

增加下一次循环的步数：
t++
由于您处于学习模式…

…我把实际的编码留给你。
你的意思是，我应该在我的代码中添加一些参数吗？我不知道如何制作动画，我只需要在cleartimeout之前提供一些条件来降低动画速度。对于每个动画循环，放松功能将为你提供一个新的
spinAngle
。这是自动的
spinAngle
调整后，轮子在动画开始时旋转得更快，在动画结束时旋转得更慢。不需要额外的“条件”--放松功能可以为您完成所有这些！