|
|
Consider the snapshots of a set of moving rectangles that belong to a group of chained animation effect in Figure 9.9 and Figure 9.10.
Figure 9.9: A snapshot of multiple rectangles and chained animation effects.
Figure 9.10: Another snapshot of multiple rectangles and chained animation effects.
The SVG document chainedAnimateMultiRect1.svg in Listing 9.5 demonstrates how to use multiple SVG animate elements in order to render a set of moving rectangles according to a specified time sequence.
Listing 9.5 chainedAnimateMultiRect1.svg
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(50,50)"> <rect width="500" height="400" fill="none" stroke-width="4" stroke="black"/> </g> <g transform="translate(50,50)"> <rect x="0" y="0" width="100" height="100" stroke-width="4" stroke="blue" fill="red"> <animate attributeName="x" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="400"/> </rect> <rect x="400" y="0" width="100" height="100" stroke-width="4" stroke="blue" fill="green"> <animate attributeName="y" attributeType="XML" begin="rect1b.end" dur="4s" fill="freeze" from="0" to="200"/> </rect> <rect x="400" y="200" width="100" height="100" stroke-width="4" stroke="blue" fill="blue"> <animate attributeName="x" attributeType="XML" begin="rect2b.end+2s" dur="4s" fill="freeze" from="400" to="0"/> </rect> <rect x="0" y="200" width="100" height="100" stroke-width="4" stroke="blue" fill="yellow"> <animate attributeName="y" attributeType="XML" begin="rect2b.end" dur="4s" fill="freeze" from="200" to="0"/> </rect> </g> </svg>
Listing 9.5 renders an outer 'anchor rectangle,' and it contains four SVG animate elements that are applied to four rectangles (all of which reference the same rectangle defined in the SVG defs element) in order to create an animation effect. However, in this example, the start and stop points for the shifting rectangles are linked together as described in the following four steps.
The first animation effect shifts the rectangle in the upper-left corner of the anchor rectangle horizontally to the right until it overlays the rectangle in the upper-right corner of the anchor rectangle with the following fragment:
<rect x="0" y="0" width="100" height="100" stroke-width="4" stroke="blue" fill="red"> <animate attributeName="x" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="400"/> </rect>
The second animation starts immediately after the first animation effect has completed, and it shifts the rectangle in the upper-right corner of the anchor rectangle vertically downward until it overlays the rectangle in the lower-right corner of the anchor rectangle with the following fragment:
<rect x="400" y="0" width="100" height="100" stroke-width="4" stroke="blue" fill="green"> <animate attributeName="y" attributeType="XML" begin="rect1b.end" dur="4s" fill="freeze" from="0" to="200"/> </rect>
The third animation starts two seconds after the second animation effect has completed, and it shifts the rectangle in the lower-right corner of the anchor rectangle horizontally toward the left until it overlays the rectangle in the upper-left corner of the anchor rectangle.
<rect x="400" y="200" width="100" height="100" stroke-width="4" stroke="blue" fill="blue"> <animate attributeName="x" attributeType="XML" begin="rect2b.end+2s" dur="4s" fill="freeze" from="400" to="0"/> </rect>
The fourth animation starts immediately after the second animation effect has completed, and it shifts the rectangle in the lower-left corner of the anchor rectangle vertically upward until it overlays the rectangle in the upper-left corner of the anchor rectangle with the following fragment.
<rect x="0" y="200" width="100" height="100" stroke-width="4" stroke="blue" fill="yellow"> <animate attributeName="y" attributeType="XML" begin="rect2b.end" dur="4s" fill="freeze" from="200" to="0"/> </rect>
|
|