Question

我遇到了a-frame的问题。这是从延迟场景中删除组件或基元的方法吗？就像jQuery中的fadeOut一样？

我应该检查opacity CSS属性或特殊className的每个刻度还是像这样？？

如果我想从ng-repeat fadeOut一个原语，我应该使用ng-animate并检查.ng-leave类吗？

理想情况下，我想在我的组件或原语的remove()函数中声明algorythm。例如，如果我在remove（）函数中返回Promise，则在promise resolve上删除Object3D。但这不是以这种方式实施的，而且我已经陷入困境:(

示例：http://codepen.io/Disorrder/pen/BWBKpb

Answer 1

我可能会感到困惑，你是想要删除它还是只是将它淡出视野？您可以考虑将内置Animations与A-Frame一起使用。例如：https://aframe.io/docs/0.5.0/core/animations.html#begin

这不会删除它，但jQuery（根据您的第二个问题）不会删除fadeOut()上的元素。

Answer 2

http://codepen.io/jdoyle/pen/aJoVJj

据我所知，不透明度CSS属性对场景中的对象没有影响。因此，我认为您无法使用.ng-leave。为不透明度设置动画的唯一方法是通过动画组件或以编程方式。

使用$timeout提供程序，并了解动画持续时间，您可以设置如下内容：

<a-box ng-repeat="box in page.getActiveBoxes() track by box.id"
         ng-class="{animated: page.animate}"
         position="{{box.position}}"
         rotation="0 45 0"
         width="0.6" height="1" depth="0.6"
         color="{{box.color}}"
    >
  <a-animation attribute="opacity" begin="fadeOut" duration="5000" to="0"></a-animation>
</a-box>

fadeOut() {
  var id = this.getRandomInt(0, this.boxes.length-1);
  document.querySelector('#box-' + id).emit('fadeOut');
  this.$timeout(function() {
    // you can now delete the primitive
  }, 5000 + 50);  // added 50ms for good measure
}

getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

这不是最优雅的解决方案，但我无法想到另一种方式。

另一个令人失望的是，角度插值不适用于动画的持续时间属性。持续时间一旦设定，无法更改。这不起作用：

<a-animation attribute="opacity" duration="{{page.animationDuration}}" begin="fadeOut" to="0"></a-animation>

A帧fadeOut原语

2 个答案: