phetsims / twixt

Animation library for interactive HTML5 graphics
MIT License
1 stars 3 forks source link

TransitionNode performance problem #17

Closed pixelzoom closed 6 years ago

pixelzoom commented 6 years ago

TransitionNode currently uses addChild and removeChild, and that can be a performance problem if your Node is complicated. For example, see See https://github.com/phetsims/equality-explorer/issues/75#issuecomment-392862778. @jonathanolson is going to investigate a general solution.

jonathanolson commented 6 years ago

Implemented cachedNodes to improve performance. Can you try it out in equality-explorer?

pixelzoom commented 6 years ago

I reverted https://github.com/phetsims/equality-explorer/issues/75 to the "old" implementation that had exposed this problem. levelSelectionNode and scenesParent are the 2 nodes I was 'sliding' between, with scenesParent being the performance problem. The code snippet shown below now animated smoothly.

    this.transitionNode = new TransitionNode( this.visibleBoundsProperty, {
      content: levelSelectionNode
      cachedNodes: [ scenesParent ]
    } );
    this.addChild( this.transitionNode );

    model.sceneProperty.lazyLink( function( scene ) {
      if ( scene === null ) {
        self.transitionNode.slideRightTo( levelSelectionNode, TRANSITION_OPTIONS );
      }
      else {
        self.transitionNode.slideLeftTo( scenesParent, TRANSITION_OPTIONS );
      }
    } );