These all require IE 5.5 (or later) to see anything happen. Get the browser
here.
In case you were wondering...
There is no script on this page. Everything you see is done declaratively.
SMIL 2.0 Timing, Time manipulations and Animation produce the effects.
Animated Filters are used for transitions, until SMIL 2.0 Transitions are implemented.
Pretty cool, isn't it?
Orbit
demo. This is a nice mechanical animation that uses no script
(not even for button controls). It shows a stylized planetary system (no
attempt to be to scale or use correct cosmological timing). The animation is
built up with three simple animations for each planet - x-motion, y-motion
and a scale on the image. The animations for the different planets differ in
the extents of the motion and scale, and then apply a speed to make
them run faster or slower than the reference orbit for the earth.
Buttons allow the viewer to control the speed of the animation, restart the
animation, and control the volume of the associated sound.
Bounce-animation version 1.
Simple version of a bouncing ball. This is a fairly simple
animation based entirely upon the declarative syntax for SMIL Timing and
Synchronization and SMIL Animation. It was easily hand-authored with no need for script.
Bounce-animation version 2.
This is essentially the same animation, but shows that script can
be integrated with the SMIL language, when an author wishes to do so. The
key here is that the script is not performing any of the difficult work of
the timing or animation engines, but rather is just changing the animation
itself over time. Any language has limits, and script can be used to
describe applications beyond the limits of the declarative language. The
script used in this animation is equivalent to the kind of button-click
handlers that authors with script experience often use.
Bounce-animation version
3. This builds
upon the previous animation, adding synchronized sound effects and a nice
squish on the earth when it hits the ground.
Bounce-animation version 4. This is pretty
much the same the previous example, except that it shows how to make it
adapt to different screen sizes. Try making the browser window wider or
narrower while it is running to see the effect.
Control-Panel demo 1. This animation builds upon the no-script version
of the animation, and demonstrates the power of a purely declarative
animation: it can be paused, run forwards and backwards, and even supports
jumping around within the animation. Click on the Play button
to make it begin, and then you can pause, resume, skip forward and backward,
and even drag the slider around.
The control panel is implemented as a ViewLink
(an encapsulated, reusable extension behavior).
Control-Panel demo 2. Another variant on
the control panel, with a slightly different animation.
