我正在使用DougTesting.NET库创建一个车轮。我试图找到一种方法重置动画时,一个动画已经结束,但找不到任何信息。我希望清除每个状态,以便轮子返回到原始位置(就像我们没有执行函数startAnimation()))。你能提个主意吗?
let luckyDrawWheel = new Winwheel({
canvasId: "lucky-draw-canvas",
drawText: true,
numSegments: 8,
textAlignment: "inner",
textFontSize: 10,
textMargin: 35,
textFontFamily: "TUV Poetsen One",
imageOverlay: true,
segments: [...],
animation: {
type: "spinToStop",
duration: 5,
spins: 8,
callbackFinished: alertPrize,
},
});
// Called when the animation as finished.
function alertPrize(indicatedSegment)
{
alert(indicatedSegment.text + ' says Hi');
}
luckyDrawWheel.draw();
const runWheelBtn = document.getElementById("run_wheel");
runWheelBtn.addEventListener("click", () => {
luckyDrawWheel.startAnimation();
});
您可以使用LuckyDrawheel.RotationAngle=0;
和LuckyDrawheel.Draw();
然后,您的代码应该看起来像
let luckyDrawWheel = new Winwheel({
canvasId: "lucky-draw-canvas",
drawText: true,
numSegments: 8,
textAlignment: "inner",
textFontSize: 10,
textMargin: 35,
textFontFamily: "TUV Poetsen One",
imageOverlay: true,
segments: [...],
animation: {
type: "spinToStop",
duration: 5,
spins: 8,
callbackFinished: alertPrize,
},
});
// Called when the animation as finished.
function alertPrize(indicatedSegment) {
alert(indicatedSegment.text + ' says Hi');
luckyDrawWheel.rotationAngle = 0;
luckyDrawWheel.draw();
}
luckyDrawWheel.draw();
const runWheelBtn = document.getElementById("run_wheel");
runWheelBtn.addEventListener("click", () => {
luckyDrawWheel.startAnimation();
});