Animation and Modifying Quadratic Bezier Curves

---

Key Constructs

You can create animation effects in ECMAScript functions by specifying four things. First, you need a time-out period (measured in milliseconds), such as the following global variable:

var shortPause  = 100.;

Second, you need to specify the function that will be invoked after a delay of shortPause milliseconds:

theTimeout = setTimeout("window.renderBezier()",                          shortPause);

Third, you need invoke the code that stops the animation, which you can embed in a simple ECMAScript function as follows:

function stopAnimation() {    window.clearTimeout(theTimeout); }

Fourth, you need to specify a mechanism by which the preceding function will be invoked in order to stop the animation. In the current example, this mechanism is provided by clicking on the rectangle defined below:

<rect        x="50" y="200"       width="100" height="50"       onclick="stopAnimation()"       fill="green"/>

---