In the previous recipe, we allowed the user to navigate through but we didn't animate the transitions, so it looks unprofessional and clunky. Animations also help the users grasp what is happening. This recipe is going to show how to animate a relational network.
Open the files downloaded from the Packt Publishing website for Chapter 8 | Recipe 5 to follow along.
The following are the steps required to animate a relational network:
- In
NodeVisual.as, remove the functionaddLink. - Still in
NodeVisual, add the function_updateLine:private function _updateLine():void { _link.graphics.clear(); _link.graphics.lineStyle(3, _color, 0.8); _link.graphics.lineTo( -x, -y); } - Add the
animateInfunction:public function animateIn():void { _targetX = x; x = 0; _targetY = y; y = 0; TweenLite.to(this, 0.5, {x:_targetX, y:_targetY, onUpdate:_updateLine, ease:Back.easeOut } ); } - Also add the public function
animateOut:public function animateOut():void { TweenLite.to(this, 0.5, {x:0, y:0, onUpdate:_updateLine, ease:Back.easeIn } ); } - In
RelationalNetwork, replace calls toaddLinkby calls toanimateIn. - Change the
_navigateToChildrenfunction definition to the following code:private function _onNavigateToChildren(event:RelationalNetworkEvent):void { _childrenNavigateOut(NodeVisual(event.target).node); } - Change the
_navigateToChildrenfunction definition to the following code:private function _onNavigateToParent(event:RelationalNetworkEvent):void { _childrenNavigateOut(NodeVisual(event.target).node.parent); } - Start the animation by calling
_childrenNavigateOutthat has the following code:private function _childrenNavigateOut(centerNode:Node):void { var i:int; for (i = 0; i < _childrenNodeVector.length ; i++) { _childrenNodeVector[i].animateOut(); } TweenLite.delayedCall(0.5, _continueNavigateToChildren, [centerNode]); } - After half a second, call the
_continueNavigateToChildrenfunction that holds the code to recreate a relational network.
We first need to add the animation functions in the NodeVisual class. To animate, we are going to use TweenLite. We want to have an easing function; that is why we won't be using the ENTER_FRAME animation technique, but we still have to deal with the graphic API to draw the link. So in order to do this, we will use the onUpdate property of TweenLite to call a function every time it modifies a value. Our function for this will be _updateLine and it will remove the link and redraw it where the node is now situated, keeping it up-to-date.
Using this we will be able to use any easing from the TweenLite library. In this recipe, we used the Back easing function, but we could easily have used the Bounce easing, too. Anything that looks like a physical object, moving these two functions, works very well. For the animation in, we will use Back.easeOut so that our node goes just a bit farther than it is supposed to go and comes back after. For the animation out, we do the inverse, using Back.easeIn. The animation will start by going back a bit and then it will go to its target destination.
Once we have those
animations figured out we need to time them properly to make our navigation transition. This is done in step 8 and 9. We first call animateOut on each child and wait for 0.5 seconds before we can continue. After that time, we remove everything on the stage and recreate the relational network, and then we call animateIn on each of the children.
By having a different animation for the transition to a child node, we could enhance the user's understanding of what is happening.
Right now we have the same animation for when the user navigates to a parent or a child, but we could make the animation to a child different. You could first animate out all the other children, fade out the center node and the clicked child's link while moving the clicked node in the middle. Finally, you could recreate the network and animate in the child as we did previously. This would make it clear that we are navigating to a child.