如何在 A-frame 中使用 Javascript 设置属性时为更改设置动画答案

【问题标题】：How to animate the change when setting attribute using Javascript in A-frame如何在 A-frame 中使用 Javascript 设置属性时为更改设置动画
【发布时间】：2017-10-29 15:49:14
【问题描述】：

我是 A-frame 的新手，如果这是一个非常明显的问题，我深表歉意。使用带有 javascript 的 A-frame，当事件发生时，我正在更改各种元素的属性（在这种情况下，鼠标悬停在另一个元素上，但我不仅希望能够影响鼠标悬停的元素）。如何为组件内的属性更改设置动画？请看下面我的问题示例，当您凝视蓝色框时，红色框会移动位置。这是一个简单的例子，但这是一个关于如何实现这种行为的更普遍的问题。你可以看到我在头部包含了动画脚本，但在这个使用的例子中，它只用于恒定的行为，我不知道如何动态更新它。我也知道我可以添加到 HTML 中的动画标签，但我不知道如何影响这一点。非常感谢您的任何建议。

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<!-- a-frame library -->
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<!-- a-frame animation plugin -->
<script src="scripts/animation.js"></script>
<script>
    AFRAME.registerComponent('cursor-listener', {
        //initiate
        init: function () {
            //add behaviour for mouse enter (or gaze enter)
            this.el.addEventListener('mouseenter', function (evt) {
                var otherBox = document.querySelector('#otherbox');
                otherBox.setAttribute('position', '-2 1 -4');
            });
        }//end initiate
    });//end registerComponent
</script>
</head>
<body>
<a-scene>
<a-sky>
</a-sky>
<a-box cursor-listener position="0 1 -4" color="blue">
</a-box>
<a-box id="otherbox" position="-1 1 -4" color="red">
</a-box>
<a-camera>
<a-cursor>
</a-cursor>
</a-camera>
</a-scene>

</body>
</html>

【问题讨论】：

标签： javascript aframe webvr

【解决方案1】：

我认为您应该在脚本中实现事件的想法。事件可以是任何可以添加事件侦听器的事件，例如 mouseenter、mouseleave click 或加载某些内容时。这样，您将获得更多动态行为。

因此，与其让您的代码直接更改另一个对象的动画属性，不如让它发出一个事件。为此，请更改行

otherBox.setAttribute('animation', 'property: position; to: -2 1 -4');

到这一行

otherBox.emit('eventName')

然后，您可以通过在框实体中添加此行来通过 a-frame 的动画组件添加动画

<a-animation begin="eventName" attribute="position" from="-1 1 -4" to="-2 1 -4"></a-animation>

如果你想在某个事件上结束它，只需添加另一个事件监听器，例如鼠标离开并给动画一个 end="" 属性。有关动画属性可以做什么的更多信息，请访问A-Frame Animation Doc 如果您希望动画来回播放，则需要 fill="both" 和 direction="alternate"，请注意，只有在使用 repeat="value" 重复动画时，方向才有效。

希望这会有所帮助！

【讨论】：

嗨，Riccardo - 谢谢！效果很好，我以前没有遇到过 .emit 。我现在将使用这种方法，但是我对使用动画标签犹豫不决，因为 github 上的一些 cmets 建议不推荐使用动画组件，所以我不想学习会消失的模式。无论如何，感谢您的帮助和明确的回答。

【解决方案2】：

好的，我找到了一个似乎可行的解决方案。我设置属性“动画”，然后添加属性。我觉得有点奇怪。如果有人遇到这个问题，很高兴了解是否有更好的方法来实现这一点。请在下面查看我的解决方案。

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<!-- a-frame library -->
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<!-- a-frame animation plugin -->
<script src="scripts/animation.js"></script>
<script>
    AFRAME.registerComponent('cursor-listener', {
        //initiate
        init: function () {
            //add behaviour for mouse enter (or gaze enter)
            this.el.addEventListener('mouseenter', function (evt) {
                var otherBox = document.querySelector('#otherbox');
                otherBox.setAttribute('animation', 'property: position; to: -2 1 -4');
            });
        }//end initiate
    });//end registerComponent
</script>
</head>
<body>
<a-scene>
<a-sky>
</a-sky>
<a-box cursor-listener position="0 1 -4" color="blue">
</a-box>
<a-box id="otherbox" position="-1 1 -4" color="red">
</a-box>
<a-camera>
<a-cursor>
</a-cursor>
</a-camera>
</a-scene>

</body>
</html>

【讨论】：

这种方法的一个问题似乎是我无法通过将属性设置回mouseleave上的原始值来反转动画，它似乎不允许我重置动态添加的属性