javascript - 通过 JavaScript 的 A 帧动画

Question

我从 A-Frame VR 框架开始。我有一个简单的盒子，我想制作动画。

这个盒子会 float ，当看向盒子时，它会放大，点击它会旋转:

<a-box id="boxID" position="0 2 -5" rotation="0 45 45" scale="2 2 2" src="#boxTexture">
            <a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>

<!-- These animations will start when the box is looked at. -->
<a-animation attribute="scale" begin="mouseenter" dur="300" to="2.3 2.3 2.3"></a-animation>
<a-animation attribute="scale" begin="mouseleave" dur="300" to="2 2 2"></a-animation>
<a-animation attribute="rotation" begin="click" dur="2000" to="360 405 45"></a-animation>

我想用 Javascript 创建上面的内容。我从以下内容开始:

AFRAME.registerComponent('scale-on-interact', {
    schema: {
        to: {default: '2.5 2.5 2.5'}
    }, 

    init: function () {
        var data = this.data;

    }, 

    update: function() {
        var data = this.data;
        console.log(data.color);

        // MOUSE ENTER EVENT
        this.el.addEventListener('mouseenter', function() {
            console.log("enter");
            this.setAttribute('to', data.to);
        });

        // CLICK EVENT
        this.el.addEventListener('click', function() {
            console.log("click");
        });

        // MOUSE LEAVE EVENT
        this.el.addEventListener('mouseleave', function() {
            console.log("leave");
        });
    }
});

我收到了日志，但是例如在鼠标输入时，框没有按比例放大。我也不知道也找不到如何创建多个模式，因此我可以为鼠标输入创建一个“to”属性，为单击创建一个“to”属性。

Answer 1

首先，<a-animation>和 Animation Component都带 begin和 startEvents指定实体上将自动触发动画的事件的属性。 <a-animation begin="mouseenter">或 <a-entity animation__1="property: scale; to: 2 2 2; startEvents: click"> .

其次，有一个 event-set component这可能会做你想做的，设置属性以响应事件。 <a-entity event-set__1="_event: mouseenter; scale: 2 2 2"> .

第三，在你的组件中，如果你想设置比例，你应该setAttribute('scale', {x: 2, y: 2, z: 2}) , 不是 to .还要确保该组件已附加到您的实体 <a-box id="boxID" scale-on-interact> .

最后，如果你希望一个组件能够有多个实例，设置multiple: true在你的组件中。然后你可以用 __ 设置多个组件分隔符:<a-box id="boxID" component__1="foo: 1; bar: 2" component__two="foo: 2; bar: 3">