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

Hour 12. Time

For this hour, you will step back from the practical application of code to review a concept that will be fundamental in making your SVG content interactive.

With any technology that defines motion and interaction, you will need to have a system of measuring and addressing time to handle animation. In terms of SVG, animation is considered an action that occurs beyond an object's initial static display (such as an adjustment in size, visibility, color, position, and so forth). For an animation to occur (that is, for a ball to bounce or a drop-down menu to unfold), a viewer must know when to initiate the action. In some instances, you will want an animation to occur at a fixed time. For example, 5 seconds after your SVG loads, a ball should begin bouncing. In another instance, you may want that same ball to bounce once a button is pressed.

In this hour, you will learn a number of concepts critical to the animation and interaction functions discussed in the next several hours. These concepts include the following:

  • How SVG interprets time

  • How to notate time

  • How to define multiple points in time

  • How to use events instead of specific time values

To illustrate these concepts, some examples in this hour may include animation and interaction elements you have not yet learned. These instances are for illustration purposes only, and you will learn all about interaction, animation, and more in the next several hours.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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