如何在A帧中使用Javascript设置属性时为更改设置动画

Question

如果这是一个非常明显的问题，我是A-frame的新手，所以道歉。 使用带有javascript的A帧，我在事件发生时更改各种元素的属性（在这种情况下是另一个元素的鼠标悬停，但我不仅希望能够影响moused元素）。 如何设置组件内属性的更改动画？ 请看下面我的问题的一个例子，当你凝视蓝色框时，红色框移动位置。 这是一个简单的例子，但这是一个更普遍的问题，但关于如何实现这种行为。 您可以看到我在头部包含动画脚本，但在使用的示例中，它仅用于常量行为，我不知道如何动态更新它。 我也知道我可以添加到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>

Answer 1

我认为你应该在脚本中实现事件的想法。 事件可以是任何可以添加Eventlistener的东西，如mouseenter，mouseleave click或加载的东西。 这样您就可以实现更加动态的行为。

因此，不是直接更改其他对象的动画属性，而是让它发出一个事件。 为此，请更改该行

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

到这条线

otherBox.emit('eventName')

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

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

如果你想在某个事件上结束它，只需添加另一个事件监听器，例如鼠标离开并给动画一个end =“”属性。 有关动画属性可以执行的操作的更多信息，请访问A-Frame动画文档如果您希望动画来回移动，则需要fill =“both”和direction =“alternate”，请注意方向仅在您重复时才有效带有repeat =“value”的动画。

希望这可以帮助！

Answer 2

好的，我找到了一个似乎有效的解决方案。 我设置属性'animation'，然后添加属性。 这对我来说似乎有点奇怪。 如果有人遇到这个问题，那么理解是否有更好的方法来实现这一目标会很棒。 请参阅下面的解决方案。

<!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>

如何在A帧中使用Javascript设置属性时为更改设置动画

问题描述

2 个解决方案

解决方案1
3 2017-10-30 16:08:16

解决方案2
0 2017-10-29 16:01:51

如何在A帧中使用Javascript设置属性时为更改设置动画

问题描述

2 个解决方案

解决方案1 3 2017-10-30 16:08:16

解决方案2 0 2017-10-29 16:01:51

解决方案1
3 2017-10-30 16:08:16

解决方案2
0 2017-10-29 16:01:51