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

Chapter 16. Animating SVG with Scripting > Animating with ECMAScript

Animating with ECMAScript

Because you now know what is possible when you want to script SVG, it's time to show you some more examples, with a focus on animation. The intention of this section is not only to show you how to create animation even without the built-in animation techniques (as you learned in Chapter 11, “SVG Animation Elements”), but also to elaborate on the advantages and disadvantages of each approach.

Animated Clock

One animation that certainly cannot be created using SVG means alone is our digital clock. We cannot calculate the current time in SVG; we can use only ECMAScript or another scripting language. In the previous versions of this clock example, either the time was constantly 12:34:56, or the time was updated only upon user interaction (in our case, clicking an o button). If we use the setTimeout() and setInterval() methods of the window object, however, the clock can be updated automatically as well.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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