Question

我有一个用Hype 3内置的动画。我有多个场景，在每个场景的结尾，我有一个称为的函数。该函数具有一个场景名称数组，用于基于该数组导航到下一个场景。我已经在第一次导航中使用了此功能，但是，我不确定在下次调用该函数时如何转到数组的下一个项目。

如下所示，我有两个项目的数组。调用该函数时，它将导航到第一项County1。下次调用该函数时，应导航到County3。

在动画结束时，我将需要运行一个函数来重置位置，因为它将连续循环。

当前功能：

function nextScene() {
     var activeCounties = ['County1', 'County3'];
     hypeDocument.showSceneNamed(activeCounties[0]);
     console.log(activeCounties[0]);
}

Answer 1

我们可以创建一个具有其自身作用域的函数，并将属性index添加到该作用域中，以跟踪应该操作的女巫场景

尝试一下

var nextScene = (function() {
    var index = 0;

    return function () {
     var activeCounties = ['County1', 'County3'];
     // hypeDocument.showSceneNamed(activeCounties[index]);
     console.log(activeCounties[index]);

     // index++ // simpliest way to manage index
     index = index + 1 === activeCounties.length ? 0 : index + 1 // circle. if index is grather than activeCounties.length than index = 0
    }
})();


nextScene() // County1
nextScene() // County3
nextScene() // County1

Answer 2

使用全局增量变量（i）指定要在数组中指向的索引。然后，每次调用该函数时，请增加此计数器。

在这里，我还添加了% activeCounties.length，以便在显示完所有场景后将场景计数恢复为零（允许您连续循环播放）：

var i = 0;
function nextScene() {
     var activeCounties = ['County1', 'County3'];
     //hypeDocument.showSceneNamed(activeCounties[0]);
     console.log(activeCounties[i]);
     
     i = (i + 1) % activeCounties.length;
}

nextScene();
nextScene();
// Modulus brings us back to zero if all scenes reached:
nextScene();

Answer 3

在我看来，这几乎像generator functions的定义。基本上，这是唯一的方法，例如“暂停”函数的执行并在以后恢复它。因此，无需使用其他作用域的变量（例如简单地称为i的全局变量），您可以执行以下操作：

function* nextScene() {
  var activeCounties = ['County1', 'County3'];
  //hypeDocument.showSceneNamed(activeCounties[0]);
  var index = 0;
  while (true) {
    yield activeCounties[index];
    index++;
    if (index == activeCounties.length) {
      index = 0;
    }
  }
}

generateScene = nextScene();

console.log(generateScene.next().value);
console.log(generateScene.next().value);
console.log(generateScene.next().value);
console.log(generateScene.next().value);
console.log(generateScene.next().value);

您可以看到一个演示here。请注意关键字function之后的星号。您也可以阅读有关here的更多信息。

here也可以找到我喜欢的视频，它在一个简单游戏的背景下对此进行了解释。

Answer 4

只是有所不同，我想我会向您展示如何使用称为SceneManager

的类来管理它

class SceneManager {
  constructor() {
    this.activeCountries = ['County1', 'County3'];
    this.index = 0;
  }
  nextScene() {
    let activeCountry = this.activeCountries[this.index];
    this.index = (this.index + 1) % this.activeCountries.length;
    return activeCountry;
  }
}

const sm = new SceneManager();

//hypeDocument.showSceneNamed(sm.nextScene())

console.log(sm.nextScene()) // County1
console.log(sm.nextScene()) // County3
console.log(sm.nextScene()) // County1

在构造函数中，我们记下索引0，并创建一个activeCountries数组。然后，在其中，我们有一个函数nextScene()，它将返回活动的国家/地区并沿数组列表移动索引。

Javascript：存储上一个值，并在下次调用时加1

4 个答案: