Test possible values for 'keyTimes'

Six animations have been defined to animate the height of a rectangle. For each animation, ruler lines and text are provided to help show what the correct behavior is. The red text shows the values for the 'calcMode' and 'keyTimes' attributes. The black text and ruler lines help show the sizes and movement of the rectangles over time.

The first two animations in the first row show animations with calcMode="discrete" (i.e., a jumping animation). The two animations have slightly different settings for the 'keyTimes' attribute, resulting in different jumping behavior over time.

The third animation in the first row shows calcMode="paced" for an animation that has constant velocity, thus showing how 'values' and 'keyTimes' are ignored.

The first two animations in the second row show animations with calcMode="linear". The two animations have slightly different settings for the 'keyTimes' attribute, resulting in different velocities over time.

The third animation in the second row shows calcMode="spline". This animation should behave exactly like the first animation in the same row except for the behavior between time 4 seconds and 8 seconds, where the third animation displays an ease-in/ease-out approach instead of a constant linear approach.