A-FRAME 1.0.4 如何正確定義 animation mouseenter 和 mouseleave

Question

我有一個包含用作按鈕的圖像的實體我想在鼠標 hover 時將該按鈕從“1 1 1”縮放到“2 2 1”。我使用 JS 生成該按鈕。 其他屬性已設置且有效，但 animation 無效。 你能告訴我哪里出了問題嗎？

_buttonA.setAttribute("animation__mouseEnter", "property: scale; type: scale; from: 1 1 1; to: 2 2 1; startEvents: mouseenter; dur: 500");

 _buttonA.setAttribute("animation__mouseLeave", "property: scale; type: scale; from: 2 2 1; to: 1 1 1; startEvents: mouseleave; dur: 500");

Answer 1

通過 JS 生成 object 后，我看到 animation 屬性的值為空。 我不知道為什么 setAttribute 在這里不能正常工作。

我嘗試使用：createAttribute 和 setAttribtueNode，如下所示，它有效：

        var animation__mouseEnter = document.createAttribute("animation__mouseEnter");
        var animation__mouseLeave = document.createAttribute("animation__mouseLeave");
        animation__mouseEnter.value ="property: scale; type: scale; from: 1 1 1; to: 1.3 1.3 1; startEvents: mouseenter; dur: 200";
        animation__mouseLeave.value ="property: scale; type: scale; from: 1.3 1.3 1; to: 1 1 1; startEvents: mouseleave; dur: 200";
        buttonA.setAttributeNode(animation__mouseEnter);
        buttonA.setAttributeNode(animation__mouseLeave);

P/S: 我可以使用下面的 setAttribute 為其他 object 設置 animation: _im.setAttribute("animation__rotation", "property: rotation; loop: true; from: 0 0 0; to: 0 360 0; dur: 5000"); 在 chrome 瀏覽器的檢查器中，它也顯示為空，但它在檢查器中顯示object 的圖像

如果使用 createAttribute 和 setAttributeNode，animation 的值將像這個快照一樣在檢查器中完全顯示