Paper.js 缩放变换在 onFrame 事件之外继续

Question

我运行遇到了 Paper.js 的一个奇怪问题 - 我正在使用库来缩放随机生成的花的“花瓣”，同时播放音频。

如果花正在“生长”并且用户导航到浏览器中的其他选项卡，则会出现此问题。尽管当 window 不在视图中时似乎没有触发 onFrame 事件，但当时正在缩放的花瓣将无限期地继续缩放。

我什至尝试使用特殊的 js 库来确定 window 是否在视图中，但仍然无法让花瓣停止缩放。

您可以在此处查看演示，因为我什至无法在纸草图中复制它：https://demos2.paperbeatsscissors.com/

还包括我的 onFrame 代码，以防问题对某些人来说很明显：

view.onFrame = function(event) {
    
    // See if something is playing
    if (playing > -1) {

      // Get the active flower
      var activeFlower = garden[playing],
          activeData = activeFlower.data;

      // Active layer and petal
      var activeLayer = getEl(activeFlower, activeData.lIndex),
          activePetal = getEl(activeLayer, activeData.pIndex);

      // Variables
      var time = activeData.audio.seek(),
          scaleAmount = (1 / (activeData.timing / event.delta.toFixed(3))) * 2;

      // Petal progression
      if (!activeData.completed) {
        if (activePetal.scaling.x < 1 && activePetal.scaling.y < 1) {
          activePetal.pivot = {x: 0, y: activePetal.height / 2};
          activePetal.scaling.x = activePetal.scaling.x + scaleAmount;
          activePetal.scaling.y = activePetal.scaling.y + scaleAmount;
        } else {
          if (activeData.pIndex < (activeLayer.children.length - 1)) {
            // If the petal is scaled, jump to a new petal
            activeData.pIndex += 1;
          } else {
            if (activeData.lIndex > 0) {
              // When all petals are bloomed, jump to a new layer
              activeData.pIndex = 0;
              activeData.lIndex -= 1;
            } else {
              // Set the flower as completed
              activeData.completed = true;
            }
          }
        }
      }

      activeFlower.rotate(.125, activeData.center);

      // Reset the playing variable if the audio clip is complete and the flower has completed
      if (!activeData.audio.playing() && time === 0 && activeData.completed) {
        playing = -1;
      }
    }
  }

真的被这个难住了，所以非常感谢任何帮助！

Answer 1

我认为您的问题是因为您的缩放计算基于 event.delta，它表示自上次事件触发以来经过的时间。
问题是，如果我没记错的话，在幕后，Paper.js onFrame 事件依赖于 requestAnimationFrame 如果选项卡处于非活动状态，它不会触发。
因此，当您切换标签时，请稍等片刻，然后返回您的标签 event.delta 值很大，您的缩放值也很大，因此花瓣的大小。这个基本 sketch 展示了这种行为。

所以在我看来，您应该简单地检查 event.delta 值并在它太高时限制它。

Paper.js 缩放变换在 onFrame 事件之外继续

Paper.js scale transform continues outside the onFrame event

javascript

paperjs

requestanimationframe