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

Question

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

<!-- 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"，则不会出现动画。我试过用两种方式触发事件：

首先，通过在标签 上面的脚本标签场景中注册一个组件，然后使用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">

Answer 1

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

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

Answer 2

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

有效的是将 emit 调用置于超时状态：

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

代码笔：http://codepen.io/shanabus/pen/zZYBaa

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

Text animation not occurring on event emission (or event not emitting)

aframe