时间戳

首页 > 解决方案 > html5 画布导航栏的对象数组

javascript - html5 画布导航栏的对象数组

问题描述

我在 Adob​​e Animate 上制作了一个 html5 Canvas 动画，并使用一些代码进行了调整。

我在动画中有一部分就像一个组合框，其中包含用于浏览不同帧的所有链接。问题是，我不想为许多按钮创建一堆 EventListener，因为根据经验，我知道这不太好用。所以我在想一个更有创意的解决方案。这是我的想法。

  1. 创建一个包含所有按钮的数组。
  2. 为每个目标帧分配一个变量。
  3. 创建一个内部带有函数的 for 循环，将侦听器分配给选定的按钮，然后将其指向所需的帧（变量）

这是我到目前为止所得到的，（不多）

    var combobox = [this.btncasco , this.btnbanyera , this.btnLumbrera , this.btnproapopa, this.btnestriborbabor ];


for (var i=0; i<combobox.length; i++) {
var clipcasco = gotoAndStop(0);
var clipbanyera = gotoAndStop(2);
var cliplumbera = gotoAndStop(4);
var clipproapoa = gotoAndStop(6);
var clipestriborbabor = gotoAndStop(8);


    }

那可行吗？

标签： javascriptjquery-animateadobecreatejs

解决方案

在您的示例中，您只是分配 gotoAndStop 的结果（没有范围，因此您很可能在控制台中遇到错误）

我想你正在寻找这样的东西：

for (var i=0; i<combobox.length; i++) {

  // This is kind of complex, but if you just reference "i" in your callback
  // It will always be combobox.length, since it references the value of i
  // after the for loop completes variable.
  // So just store a new reference on your button to make it easy
  combobox[i].index = i*2; // x2 lines up with your code 0,2,4,etc.

  // Add a listener to the button
  combobox[i].on("click", function(event) {
    // Use event.target instead of combobox[i] for the same reason as above.
    event.target.gotoAndStop(event.target.index);
  }

}

您可能会遇到与未定义按钮的其他 StackOverflow 帖子相同的问题（检查控制台）。实际上，现在 Animate 导出中存在一个错误，即剪辑的子项无法立即使用。为了解决这个问题，您可以this.gotoAndStop(0);在开始时调用以强制它更新孩子。

推荐阅读