单击按钮时的 Aframe 动画

Question

我正在使用框架创建网页，点击图像时会显示一个面板。

点击图片面板可见，我添加了一个动画来改变它的 Y 轴位置 well.Unfortunately，动画没有被触发。我怎样才能做到这一点？我在下面提供了到目前为止我尝试过的代码。我是 a-frame 的新手，非常感谢您的帮助。谢谢

<!DOCTYPE>
    <html>

    <head>
    <title>A-FRAME DEMO</title>
    <script src="https://aframe.io/releases/0.6.0/aframe.js"></script>
    </head>

    <body>

    <a-scene>

    <a-assets>
    <img id="button" src="icons/button.png">
    </a-assets>

    <a-camera position="0 2 0"  wasd-controls-enabled="false">
    <a-cursor color="blue"/>
    </a-camera>

    <a-sky color="#FFF"></a-sky>

    <a-plane id="plane1" color="#000" height="4" width="20" position="0 0 -9" transparent="true" opacity="0.5" visible="false">
    <a-text value="Some Random Text." align="center" color="white" width="10" position="0 0 2" ></a-text>
    <a-image  id="cancel_tc" src="#cancel" position="9.5 3 0"></a-image>
    </a-plane>

    <a-image id="button_click" slidehandler1 src="#button" height="1" width="1" position="0 -1.6 -7"></a-image>

    </a-scene>

    <script>

    AFRAME.registerComponent('slidehandler1', {
    init:function() {
    var pln = document.querySelector("#plane1");
    this.el.addEventListener('click', () => {
    pln.setAttribute('visible',true);
    //pln.setAttribute("position",{x:0,y:5,z:-9});
    pln.setAttribute('animation', 'property: position; dur: 1000; from: 0 0 -9; to: 0 5 -9');
    });
    }
    });

    </script>

    </body>
    </html>

Answer 1

animation 组件随 a-frame 0.9.0 一起提供。如果可以，只需切换到最新版本。如果不可能，您需要包含 animation component.

Fiddle here.

Answer 2

如果您想在使用鼠标而不是光标单击时激活它，请查看此组件。 https://github.com/mayognaise/aframe-mouse-cursor-component

单击按钮时的 Aframe 动画

Aframe animation on button click

javascript

animation

aframe