Question

我正在使用a-frame创建网页，点击图片后会出现一个面板。

单击图像后面板可见，我还添加了一个动画来更改其Y轴位置。不幸的是，该动画未触发。我该如何实现？我在下面提供了我尝试过的代码。我是刚接触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组件的框架为0.9.0。如果可以，请切换到最新版本。如果不可能，则需要包含animation component。

提琴here。

Answer 2

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

单击按钮即可放弃动画设置

2 个答案: