事件发射（或事件未发射）时未发生文本动画答案

【问题标题】：Text animation not occurring on event emission (or event not emitting)事件发射（或事件未发射）时未发生文本动画
【发布时间】：2017-02-24 06:32:22
【问题描述】：

我的场景中有一个文本元素和一个天空盒。当场景初始化时，我希望文本为其位置设置一次动画。

<!-- scene elements -->
<a-scene coogee2006-scene embedded style="width:100%;height:400px;">
    <a-assets>
        <img
            id="coogee2006"
            src="/assets/vr/sydney-coogee-3-peter-gawthrop.jpg"
            preload="auto">
        <audio
            id="beachsound"
            src="/assets/vr/beach1.wav"
            preload="auto">
    </a-assets>

    <a-sky src="#coogee2006"
        rotation="0 -90 0">
    </a-sky>

    <!-- text animates in on startup (see searise_vr.js) -->
    <a-text
        id="coogee2006-text"
        value="Coogee, Sydney\n2006"
        position="5 12.5 -50"
        rotation="0 -15 0"
        scale="20 20 20"
        visible="true"
        text="anchor:align;alphaTest:0.2;width:5;
        value:COOGEE, SYDNEY\n2006;
        zOffset:0;color:#000;font:exo2bold"
        sound="src:#beachsound;autoplay:true;loop:true;volume:20;">
        <a-animation
            attribute="position"
            dur="3000"
            begin="coogeetour"
            to="12.5 12.5 -50"
            easing="ease-in"
            fill="both"
            repeat="0">
        </a-animation>
    </a-text>
</a-scene>

如果我使用begin=5000 设置静态延迟，它可以正常工作，但如果我尝试在事件上设置它，例如begin="coogeetour"，则不会出现动画。我尝试了两种方式触发事件：

首先，通过为场景注册一个组件，在a-scene标签上方的脚本标签中，并使用document.querySelector()标识文本元素：

<script>
    AFRAME.registerComponent('coogee2006-scene', {

    // emit text events when the scene is initialised
    init: function () {
        console.log('Running coogee2006-scene.init()');
        document.querySelector("#coogee2006-text").emit('coogeetour');
    }
    });
</script>

其次，通过为 文本元素 注册一个组件并使用 this.el，如在 A-Frame Writing a Component 部分中，并将其放入链接的外部文件中：

AFRAME.registerComponent('coogee2006-text', {

  // emit text events when the scene is initialised
  init: function () {
    console.log('Initialising text element');
    this.el.emit('coogeetour');
  }
});

在任何一种情况下，console.log 都有效，因此组件正在初始化，但动画没有发生。我在调试时在元素的事件监听器中找不到coogeetour，但我不知道这是因为emit() 工作不正常还是因为它不应该出现在调试中。

编辑：这是我在加载时的控制台日志：

Navigated to http://127.0.0.1:4000/private/JoQyfM/
index.js:73A-Frame Version: 0.5.0 (Date 10-02-2017, Commit #110055d)
index.js:74three Version: ^0.83.0
index.js:75WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
browser.js:117 core:a-assets:warn Asset loading timed out in  +0ms 3000 ms
three.js:19590 THREE.WebGLRenderer 83
(index):81 Running coogee2006-scene.init()
browser.js:117 components:sound:warn All the sounds are playing. If you need to play more sounds simultaneously consider increasing the size of pool with the `poolSize` attribute. +118ms
three.js:17507 THREE.WebGLRenderer: image is not power of two (5980x2990). Resized to 8192x4096 <img crossorigin="anonymous" src="/assets/vr/sydney-coogee-3-peter-gawthrop.jpg">

【问题讨论】：

标签： aframe

【解决方案1】：

我不确定具体原因，但看起来组件方法正在吞噬emit() 事件。我尝试在 update() 函数中调用相同的调用，但它仍然不起作用。

起作用的是将发出调用置于超时状态：

setTimeout(function() { document.querySelector("#coogee2006-text").emit('coogeetour'); }, 0);

Codepen：http://codepen.io/shanabus/pen/zZYBaa

【讨论】：

【解决方案2】：

好吧，看起来begin 只适用于数值； delay 适用于数值和事件名称。公平地说，这在动画的attribute table 中有所描述，但begin 属性上它下方的块显示了它与事件名称一起使用的示例。也许是贬值的属性？

编辑：好吧，也许这不是答案。我不完全确定为什么 delay 和 begin 都存在 - 是因为在事件触发后可能会有延迟，还是 delay 只是贬值了？

【讨论】：

rensa，文档说 begin 可以是事件名称，“这可以是一个数字，表示等待的毫秒数，也可以是要等待的事件名称。”
是的，我认为这可能是一个不同的问题，我只是对delay 和begin 感到困惑。我会尽快给你答案！