• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

11. Animating and Scripting SVG > How Time Is Measured

How Time Is Measured

SVG’s animation clock starts ticking when the SVG has finished loading, and it stops ticking when the user leaves the page. You may specify a beginning or duration for a particular animation segment as a numeric value in one of these ways:

  • A full clock value in hours, minutes, and seconds (1:20:23).

  • A partial clock value in minutes and seconds (2:15).

  • A time value followed by a “metric,” which is one of h (hours), min (minutes), s (seconds), or ms (milliseconds), for example dur="3.5s" begin="1min". If no metric is specified, the default is seconds. You may not put any whitespace between the value and the metric.

You may also tie an animation’s beginning time to the beginning or end of another animation. Example 11-4 shows two circles; the second one will start expanding as soon as the first one has stopped shrinking. Figure 11-4 shows the important stages of the animation.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint