當發射事件觸發效果時，在js中更改動畫的'to'不起作用

Question

我試圖爲此父攝像頭實體播放短的旋轉動畫。我有以下內容的動畫：

<a-animation attribute="rotation" dur="1000" to="0 163.5761975835419 0" fill="forwards" begin="rotateCam"></a-animation> 

然後，我嘗試發射rotateCam（與animation.setAttribute（...））之前設置的「to」屬性，但它只能播放默認的旋轉我在HTML中設置。我錯過了什麼嗎？

例如看到這個fiddle。 v0.5.0。

謝謝你的時間。

Answer 1

經過一番研究並與A-Frame Slack上的dirkk0交談之後，他們開始明確表示他們正在採用基於組件的方法。我改變了我的代碼來應用ngokevin的動畫組件，它解決了我的問題！ :)

Relevant test (AFrame v0.5.0)

HTML：

<a-scene> 
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> 
    <a-box position="-1 0.5 -3" width="1" height="1" depth="1" color="#4CC3D9" animation="property: rotation; dur: 1000; startEvents: rotateBox"></a-box> 
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> 
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> 

    <a-sky color="#ECECEC"></a-sky> 
</a-scene> 

JS：

setTimeout(() => { 
    let box = document.querySelector('a-box'); 

    box.setAttribute('animation', 'to', '0 20 0'); 
    box.emit('rotateBox'); 
}, 2000);