A帧淡出原语

Question

I've got a trouble with a-frame. Is here way to remove a component or primitive from scene with delay? Like fadeOut in jQuery?

should I check every tick for opacity CSS property or special className or smth like that?

If I want to fadeOut a primitive from ng-repeat , should I use ng-animate and check for .ng-leave class?

Ideally, I want to declare algorythm in remove() function of my component or primitive. For example, if I return a Promise in remove() function, then remove Object3D on promise resolve. But that's implemented not in this way, and I've got stuck :(

look example: http://codepen.io/Disorrder/pen/BWBKpb

Answer 1

I may be confused, are you trying to remove it or just fade it out from view? You may consider using the built-in Animations with A-Frame. Examples here: https://aframe.io/docs/0.5.0/core/animations.html#begin

This wouldn't remove it, but jQuery (per your second question) does not remove the element on fadeOut() .

Answer 2

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

As far as I can tell, the opacity CSS property will have no effect on objects in the scene. Because of this, I don't think you will be able to use .ng-leave . The only way to animate the opacity is through the animation component, or programmatically.

Using the $timeout provider, and knowing the animation duration, you could set something up like this:

<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;
}

It is not the most elegant solution, but I can't really think of another way.

Another disappointment, angular interpolation does not work for duration property of animation. Duration once set, cannot be changed. This will not work:

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