Hello, World Part 2: Simple Animation

  • Article

In the last Hello, World example, I showed you how to place a simple text label on the screen. In this next instalment, we will add a very basic (and somewhat underwhelming) animation to the text label by modifying the markup file.

Hello.xmu

Here's the new file, with the updated content in colour:

 

<?xml version="1.0"?>

<root xml:lang="en" xmlns="https://www.dvdforum.org/2005/ihd"

xmlns:style="https://www.dvdforum.org/2005/ihd#style"

xmlns:state="https://www.dvdforum.org/2005/ihd#state">

 

<head>

<styling />

<
timing

clock
=
"
page
"
>

<
par
>

<
cue

select
=
"
//div
"

dur
=
"
5s
"
>

<
animate

style:width
=
"
250px;1000px
"
/>

<
animate

style:height
=
"
50px;200px
"
/>

</
cue
>

 

<
cue

select
=
"
//p
"

dur
=
"
5s
"
>

<
animate

style:fontSize
=
"
48px;190px
"
/>

</
cue
>

</
par
>

</
timing
>

</head>

<body>

<div style:position="absolute" style:x="822px" style:y="551px"

style:width="250px" style:height="50px" style:backgroundColor="blue">

 

<p style:font="Verdana.ttf" style:fontSize="48px"

style:color="white">Hello, World</p>

 

</div>

</body>

</root>

 

This will take the original "Hello, World" white-on-blue label and cause it to "grow" over a 5-second period until it is in 190px-high text on a 1000px x 200px blue background. At the end of the 5 second period, it will go back to the original 48px-high text on the 250px x 50px background.

Looking at the Elements

So what's changed / added? Let's see:

timing

We opened up the timing element and added some children. All declarative animations live in this element; procedural animations are defined in script (which we will get to later). As a refresher, the clock="page" attribute tells the computer that our timings will be based on application time, not video time (since we have no video at this point in time :-) ).

par

A par is a parallel time container; that is, it defines animations that can happen in parallel (at the same time). We use the par here to describe two different animation sequences that will happen together (make the text bigger and make the background bigger). For completeness' sake, the other kind of time container is a seq, or sequential container. A seq element causes its child animations to happen one after the other, which is not what we want here.

cue

A cue is just that -- a cue (or trigger) for the animation engine to start an animation. Cues can get quite complicated and have various options for describing start and end conditions, but the two cues used here are quite simple. Both cues use a simple XPath-based expression to select an element to be animated, namely the one-and-only div and the one-and-only p. If we had more than one of each kind of element on the page, they would be animated too. The animations will both run for 5 seconds, as that is the specified duration (dur).

animate

The animate element tells the iHD engine what we want to have happen. The "thing to be animated" is specified by the select attribute of the parent cue (so, in these cases, the div or the p) and the length of the animation is specified by the dur attribute. Thus, for example, the first two animations will both apply to the div (and run for 5 seconds), whilst the third will apply to the p (and also run for 5 seconds). The animate element includes the name of the attribute to be animated (width, height, and fontSize in this case, all from the style namespace), along with the starting and ending values separated by a semi-colon.

How it Works

Here's a simplified timeline of how things work at time t:

·
t=0: The iHD engine creates the page, laying out the elements as specified in the body. It notices that there are two cues that are ready to run (they have no begin condition -- we'll cover that later) so it sets up three "property override blocks" for the animating properties (div::style:width, div::style:height, and p::style:fontSize) and sets up their start / end values and their duration.

·
t=1 to t=5: For each animating property, the iHD engine interpolates the current value from start to finish, re-drawing the screen at every frame with the calculated values. This provides a smooth animation of the text and background.

·
t=6: The three animations have completed, so their "property override blocks" are removed and the page reverts to its original value, placing the text back to its original 48px size

·
t=7 to t=infinity: Nothing happens, since there are no more cues that are ready to run.

And that's it!

Next Time...

We'll look at some simple state management next time.