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.