Rectangles and Multiple Animation Effects

   



Chained Animation Effects

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.

click to expand
Figure 9.9: A snapshot of multiple rectangles and chained animation effects.

click to expand
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

start example
<?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>
end example

Remarks

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.

  1. 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>
  2. 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>
  3. 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>
  4. 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>



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net