Animation

From FHTML

1 Theory

• FluidHtml uses XML to describe animations. Unlike CSS, XML is self-documenting and extremely flexible, allowing FluidHtml animations to be more expressive and complex than CSS3 keyframes. That said, we will support CSS3 keyframes soon...

2 Syntax

• FluidHtml uses the animation tag to declare animations.
• Animations, like other FluidHtml assets, are declared in a <style type="xml/fhtmlassets"> node.
• Each animation can contain many frame elements. These are different than video frames - they do not execute at 29.97 frames per second! Rather, a frame is a way to group a bunch of action elements together.
• Each action element can be either:
  • A property animation.
  • A script execution.
  • A call to load a page into a particular Fhtml element.
  • A nested animation.

Here's a very simple animation to help you get familiar with the syntax:

3 Controlling Animations

Animations are controlled via the following methods:

start('animationName');

Will play the animation from the start until the end or until another method call is made.

stop();

Will stop the animation and reset all values to their start value.

play();

Will play whatever animation associated with this view was last paused.

pause();

Will pause the animation associated with this view that is currently playing.

gotoAndPlay('animationName', frame);

Will play an animation from the given frame until the end or until another method call is made. The frame argument can be a number or the name of a given frame.

gotoAndStop('animationName', frame);

Will play a given frame of an animation. The frame argument can be a number or the name of a given frame.

gotoStart();

Equivalent to stop();

gotoEnd();

Will send an animation to the last instant of the last frame, setting all values to the values calculated for that time.

gotoAndPlay('animationName', 'method', frame(optional));

Pass in animation name, method name and frame name or index. If you use this method, you don't need the others, but the others can be convenient and less verbose.

Of course, any of these methods can be included in a script:

4 Time-bases - what's the cuepoint?

FluidHtml supports three different ways of animating elements over time. The question that each method answers is 'when do I want this part of the animation to happen?' Phrased another way, 'what is the cuepoint?'

4.1 Cuepoints derived from duration of frame

• This is the default behavior of FluidHtml animations.
• Using this methodology, the cuepoint is not specifically declared. It's inferred from the duration of the frame.** All action elements in each frame will animate before the animation proceeds to the next frame.
• This syntax is useful for creating animations based on interaction - like button states for example. Here we define four states for a button. They are all declared in the same animation - read on below for how each is executed:

4.2 Percentage-based cuepoints

• Each frame will trigger at a percentage of the animation's total duration.
  • Each action can have a duration that is different than the value of the cuepoint of the frame that contains it.
• This syntax is similar to CSS3 keyframes, although CSS3 keyframes don't support different durations for elements within a frame.

THERE APPEARS TO BE A BUG WITH THIS FUNCTIONALITY. WE'RE WORKING ON IT!

4.3 Smpte and clock-based cuepoints

• Each frame will trigger at the exact value specified by the cuepoint attribute.
• Cuepoints are specified using either:
  • SMPTE notation (like video editors): 01:23:45
  • Hour/Minute/Second notation (like YouTube): 1h23m45s
• Each action can have a duration that is different than the value of the cuepoint of the frame that contains it.
• This syntax allows you to synchronize animations to voice-over or video.

THERE APPEARS TO BE A BUG WITH THIS FUNCTIONALITY. WE'RE WORKING ON IT!

5 Looping

• Loop animations by using the loop attribute on the top level node of the animation.

• FluidHtml allows scripting of more elaborate looping routines than are easily achieved in CSS3. The loop attribute supports the following properties:
  • start - Defines the start frame (name or index) of the loop.
  • end - Defines the end frame (name or index) of the loop. If -1, the end frame is the last frame.
  • repeat - Defines the repeat count of the loop. If -1, repeat infinitely.
  • finish - If our ends frame is not the same as our last frame and we've finished looping, what do we do next? If finish is true, we play the rest of the animation. If false, we stop on the end frame.
• If you simply say loop="true" your animation will loop forever from the start frame to the end frame.

EXAMPLE COMING SOON

6 Element detail

6.1 The animation element

• The following attributes are valid on the animation element:
  • name sets the name of the animation, which is needed to use that animation in scripts.

6.2 The frame element

• The following attributes are valid on the frame element:
  • name sets the name of the frame, which can be used in scripts.
• Remember that frames of an animation can be accessed via name or index:

6.3 The action element

• There are three types of action elements, each of which supports different attributes.

6.3.1 Animating properties

When you specify <action property=" FluidHtml figures that you want to animate a property. The following attributes are then valid:

target

Set the target of this action. By default, the target of the action is the view that initiated the animation. So you usually don't have to specify a target. Use this property to, for example, switch targets just for one action in the middle of an animation. This is very useful for scripting multiple elements on a page. Click the button and various objects can be animated - not just the button!

property

The property you want to animate.

start

The start value of the property. If omitted, the current value of that property will be used.

ende

The end value of the property.

bezier

An array of values that will be 'passed through' on the journey between the start and end values.** delay - The delay (in seconds) before the action should fire.

duration

The duration (in seconds) of the action.

easing

The easing variety of the animation. There are 52 possible values, and their names follow a pattern, There are four equations for each type of animation:, in, out, inOut, and outIn. And there are lots of types of animations: Back, Bounce, Circ, Cubic, Elastic, Expo, None, Regular, Quad, Quart, Strong, Quint, and Sine. Combine the equation and the animation type to define an easing variety. For instance: inBounce, outBounce, inOutBounce, outInBounce, inExpo, outExpo, inOutExpo, outInExpo, and so on...

6.3.2 Calling scripts

When you specify the script attribute, Fhtml obviously knows that you want to call a script! Any valid script expression will fly:

6.3.3 Loading pages

One of the most useful features of FluidHtml animations is the capacity to easily load new pages in the course of an animation. This enables you to populate portions of your main page in a staged, animated fashion. Use the src attribute to achieve this:

6.4 Properties that can be inherited from parent elements

• The following properties can be set on all elements (animation, frame, action) in an animation..
  • If set on a frame, they'll be inherited by actions in that frame.
  • If set on an animation, they'll be inherited by all frames and actions in that animation.
  • Of course, frames and actions can override these settings with their own values.
• Inheritable properties: target, duration, delay and easing.