如何重置DougTesting.NET的动画？

Question

我正在使用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();
    });

Answer 1

您可以使用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();
});