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"，则不会发生动画。我试过两种方式解雇这个事件：

首先，在场景中注册一个组件，在上面的 {/ 1>}标记的脚本标记中，并使用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>，如在A-Frame this.el部分中，并将其放入外部文件中链接：

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()

Answer 1

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

将emit调用置于超时状态的工作原理是什么：

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

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

Answer 2

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

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

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

2 个答案: