我从 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”属性,为单击创建一个属性。
最佳答案
首先,<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">
关于javascript - 通过 JavaScript 制作 A 形框架动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43118505/