文本動畫不發生在事件發射（或事件不發射）

我有一個文本元素，在我的場景中的天空盒。當場景初始化時，我希望文本能夠一次對它的位置進行動畫處理。文本動畫不發生在事件發射（或事件不發射）

<!-- 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型框架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">

來源

2017-02-19 rensa

我不知道確切原因，但它看起來像組件方法吞emit()事件。我試過在update()函數中放入相同的呼叫，但它仍然不起作用。

什麼做的工作是把發送調用在超時：

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

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

來源

2017-02-23 14:33:39 shanabus

好了，它看起來像begin只與數值工程; delay適用於數字值和事件名稱。爲了公平起見，這是在爲attribute table動畫描述的，但對begin屬性它下面的塊示出的它與事件的名稱中使用的示例。也許是折舊的屬性？

編輯：好吧，也許這是不是答案。我不完全知道爲什麼delay和begin同時存在，就那麼可以有以下事件觸發的延遲，或delay只是貶值？

來源

2017-02-21 11:22:38 rensa

rensa，文檔說* *開頭可以是事件名稱，「這可以是一個數字，表示等待的毫秒數，或等待的事件名稱。「 – shanabus

是的，我認爲這可能是一個不同的問題，我只是混淆了'延遲'和'開始'。我會給你的答案一個抽搐！ – rensa

文本動畫不發生在事件發射（或事件不發射）

回答

相關問題