# Create an Animation¶

Add an animated demonstration tab to the mathlet of the previous task.

Classes to be used:
• Animation, Step, Progress

## Applet Skeleton¶

Since we need a proper layout for our new card, we add a new Canvas and ControlPanel to a demoPanel:

MMG2DCanvas demoCanvas = new MMG2DCanvas();
final ControlPanel demoCPanel = new ControlPanel();
JPanel demoPanel = new JPanel(new BorderLayout());


To add this demoPanel as a new "Demo" tab into the applet, we write:

getCenterTabbedPanel().addTab("Demo", demoPanel, 0);


The index assures that this tab is at the first position.

Now our old content has no title, so we call it "Training" now:

getCenterTabbedPanel().setTitleAt(1, "Training");


## Mathematical Entities¶

As we did before, we create a point and the fields for the polar coordinates. For example:

final MMAffine2DPoint demoPoint = new MMAffine2DPoint(NUMBER_CLASS);
final MMDouble demoRho = new MMDouble();
...


Here we can observe why it might be helpful to write the applet's logic into a separate class: it can be used from both the demo and the training mode.

## Animation¶

An animation consists of one ore more steps, defining each one a scene. Content of steps can be dependant of the animation's progress, thus allowing scenes to be deterministic for any given moment. During the animation, the current step's proceed method may be called a several times, allowing us to adjust to point's coordinates from [0,0] to [2,2]:

Step step1 = new Step(5000) {
public void proceed(Progress progress) {
demoPoint.setX(2 &minus; 2 * progress.getProgressRate());
demoPoint.setY (2 * progress.getProgressRate()) ;
DependencyUpdater.performActionCycleFromObject(demoPoint);
}
};
Animation animation = new Animation(demoCanvas);

The call performActionCycleFromObject is needed for a correct updating during the animation.
At last we add the animation panel to our demo ControlPanel:
demoCPanel.add(animation.getAnimationPanel());