A帧fadeOut原语

Question

我的a-frame有点问题。有没有办法延迟地从场景中移除组件或基元？就像jQuery里的fadeOut？

我应该检查opacity CSS属性或特殊的className或smth的每一个标记吗？

如果我想从ng-repeat动画一个基元，我应该使用ng- fadeOut并检查.ng-leave类吗？

理想情况下，我希望在组件或原语的remove()函数中声明algorythm。例如，如果我在remove()函数中返回一个Promise，那么在promise解析时删除Object3D。但这不是以这种方式实现的，我被卡住了:(

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

Answer 1

我可能有点困惑，你是想把它移走还是把它从视线中淡出？您可以考虑将内置Animations与A型框架一起使用。示例如下：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>