我有一个实体,我想像这样设置飞机:
<a-entity id="ui" opacity="0" position="0 -10 0">
<a-plane class="menu-pane" position="0 0 -60" opacity="0" color="blue" rotation="0 0 0" height="50" width="30"></a-plane>
<a-plane class="menu-pane" position="50 0 -40" opacity="0" color="blue" rotation="0 -50 0" height="50" width="30"></a-plane>
<a-plane class="menu-pane" position="-50 0 -40" opacity="0" color="blue" rotation="0 50 0" height="50" width="30"></a-plane>
<a-animation begin="mobileMenuOpen" attribute="position" dur="550" fill="both" to="0 0 0"></a-animation>
<a-animation begin="mobileMenuOpen" attribute="opacity" dur="550" fill="both" to="1"></a-animation>
</a-entity>
因此,我可以继续发射该mobileMenuOpen
事件,#ui
并使该实体及其所有平面淡入并向上移动。但是,opacity="0"
on#ui
不会影响子元素,并且我不确定动画是否会。如何达到我想要的效果?
内置的动画框架无法应用于多个实体,并且(afaik)设置父级的不透明度不会降低到其子级。我要做的是制作自己的opacity
组件版本,该版本确实适用于子代。叫它吧group-opacity
。这是一个简单的版本(可能不适用于从建模工具导出的模型),但是–
AFRAME.registerComponent('group-opacity', {
schema: {opacity: {default: 1.0}},
update: function () {
var opacity = this.data.opacity;
var children = [].slice.call(this.el.children);
children
.filter(function (child) { return child.hasAttribute('opacity'); })
.forEach(function (child) {
child.setAttribute('opacity', opacity);
});
}
});
HTML:
<a-entity id="ui" group-opacity="opacity: 0" position="0 -10 0">
<a-plane class="menu-pane" position="0 0 -60" opacity="0" color="blue" rotation="0 0 0" height="50" width="30"></a-plane>
<a-plane class="menu-pane" position="50 0 -40" opacity="0" color="blue" rotation="0 -50 0" height="50" width="30"></a-plane>
<a-plane class="menu-pane" position="-50 0 -40" opacity="0" color="blue" rotation="0 50 0" height="50" width="30"></a-plane>
<a-animation begin="mobileMenuOpen" attribute="position" dur="550" fill="both" to="0 0 0"></a-animation>
<a-animation begin="mobileMenuOpen" attribute="group-opacity.opacity" dur="550" fill="both" to="1"></a-animation>
</a-entity>
位置确实会从父级到子级级联,因此无需对该属性进行解决。
编辑:好的,我认为上面的应该可行,但是出现了一些没有太大意义的错误。可能是我的代码,或者是有关动画接线的东西。无论如何,如@ngokevin所说,对动画进行硬编码可能是目前最好的选择。快速入门示例:
AFRAME.registerComponent('group-opacity', {
tick: function (t) {
var opacity = (Math.sin(t / 1000) + 1) / 2;
this.el.object3D.traverse(function (o) {
if (o.material) {
o.material.opacity = opacity;
}
});
}
});
请注意,<a-animation/>
在这种情况下您根本不需要。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句