Overview

The MediaPortal skin engine has support for animations between control and window states. The animations are defined through use of the <animation> tag, which has a defined type and various attributes that specify the animation to be performed. All animations are additive – if two of them are in effect at the same time, their effects are added together.

Changelog

Window Animations

There are two valid window animations – the animation to perform when the window is opened, and the animation to perform when the window is closed. They take the same format as the control animations.

Control Animations

There are 6 valid control animations: WindowOpen, WindowClose, Visible, Hidden, Focus, and Unfocus. There is also a combination animation VisibleChange that constructs the Visible animation, then reverses it for the Hidden animation.

Format of Animation Tags

The animation tag is formatted as follows:

<animation attributes>type</animation>

Types

The type can be one of the following:

• WindowOpen -  Performed once only when the window is opened (if a control's visiblity is already set to 'true').
• WindowClose - Performed once only when the window is closed. No animation is performed when switching to fullscreen video, however.
• Visible - Performed when the control becomes visible via its <visible> tag.
• Hidden - Performed when the control becomes hidden via its <visible> tag.
• Focus - Performed when the control gains focus.
• Unfocus - Performed when the control loses focus.
• VisibleChange - The same as the Visible type, except the reverse animation is auto-created for the Hidden type. Just saves having to have both animations if the animation is the same in both directions (ie just reversed).
• Conditional - Performed when the control's condition attribute is filled.

Attributes

The attributes available are as follows. Note that all attributes, like tags, are case sensitive

• effect - Specifies the effect to use. Currently “fade”, “slide”, “rotate”, “rotatex”, “rotatey” and “zoom” are supported.
• time - Specifies the length of time that the animation will run, in milliseconds.
• delay - The time to delay the transition before starting it, in milliseconds.
• start - The start state of the control for this transition. For fades, this is the opaqueness as a percentage (i.e. start="100" is fully opaque, start="0" is fully transparent. For slides, this is the relative coordinate offset to start the control at (ie start="50,60" will start the control off at 50 pixels to the right, and 60 pixels below its normal viewing position. For rotates, this is the starting degree offset from the horizontal. (ie start="30" will start the control off on an angle of 30 degrees from the horizontal). For zooms, this is the starting size as a percentage. (i.e. start="50,60" will start the control at 50% of its horizontal size and 60% of its vertical size).
• end - The end state of the control for this transition. Similar to the start state, except that the end state is always kept after the animation is finished, and until the control changes its state.
• acceleration - Amount to accelerate or decelerate during a “slide”, “zoom” or “rotate” transition. For deceleration, use a negative value. A value of -1 will cause the control to come to rest at its end coordinates. Defaults to 0.
• center - Center of the rotation or zoom to perform with a “rotate” or “zoom” transition. This is the coordinates about which the rotation or zoom will take place. eg center="30,50” will mean that all points will revolve around (or zoom from) the (30,50) pixel location.
• condition - The conditions under which this animation should be performed. Defaults to being always performed. See here for a list of valid conditionals.
• reversible - If “false” the animation is not reversed if it is interrupted when it is finished. For instance a Visible animation will normally be reversed (instead of running the Hidden animation) if the control becomes hidden before the visible animation has finished. Setting reversible="false” prevents this behaviour (the Hidden animation will take its place). Defaults to true.
• pulse/loop - If “true” will make your fade animation pulse or loop when used with conditional type animations:

Example:

<control>
  ...
    <animation effect="zoom" start="100,100" end="100,105" time="500" condition="true" pulse="true">conditional</animation>
  ...
</control>

Note: Since MediaPortal 1.1.0 all pulse and loop animations and conditions are working.

• tween - Tween is like an advanced acceleration attribute that can be applied to all animations. Instead of a steady acceleration or deceleration, you can specify curves that the animation should follow. Currently, the engine supports “elastic“, “bounce“, “circle“, “back“, “sine“, “cubic“, “quadratic“ and, the default, “linear“.
  See also: Tweeners
• easing - Easing basically defines the direction of the tween and can be one of “out“, “inout“ and “in“. The default value is “out“.

Examples

Fading

<control>
  ...
  <visible>Player.HasAudio</visible>
  <animation effect="fade" time="400">VisibleChange</animation>
  ...
</control>

This causes MediaPortal to fade the control in 400 milliseconds between the visible and hidden states. The control will start off hidden, and will fade in over 400ms when you play audio, and when it's finished, it will fade out again over 400ms.

<control>
  ...
  <animation effect="fade" time="100">WindowOpen</animation>
  <animation effect="fade" time="100">WindowClose</animation>
  ...
</control>

This will cause MediaPortal to fade in the control when the window is opened and fade out the control when the window is closed

You can also specify that a control should always fade in when the window is opened by using

<control>
  ...
  <animation effect="fade" time="200">WindowOpen</animation>
  ...
</control>

This specifies that it will always start hidden, but will fade in immediately (over a time of 200ms) when the window is opened.

There is also ability to add delays preceding the transitions. For instance

<control>
  ...
  <animation effect="fade" time="200" delay="200">Hidden</animation>
  ...
</control>

would mean that the control will fade out after a delay of 200ms. This is useful for "cross fade" effects, where you want the new control to fade in while the old control is still on-screen (and then fade the old one out once the new one is completely opaque).

Slides

There are also slide effects available.

<control>
  ...
  <animation effect="slide" end="30,0" time="200">Focus</animation>
  ...
</control>

This will slide the control 30 pixels to the right of its normal position when it becomes focused. Note that when it becomes unfocused it will jump back to its normal position. A Unfocus animation will make it slide back gracefully.

Rotations

<control>
  ...
  <animation effect="rotate" end="30" center="360,288" time="200">Focus</animation>
  ...
</control>

Will rotate the control 30 degrees counter-clockwise about the center of a PAL screen (360,288) when the control becomes focused.

Also "rotatex" and "rotatey" are available which will rotate the control around the X and Y axis.

Zooming

<control>
  ...
  <animation effect="zoom" end="120" center="360,288" time="200">Focus</animation>
  ...
</control>

Will zoom the control to 120% of its normal size when the control becomes focused, with the zoom centered at the center of a PAL screen (360,288). You can zoom each dimension by different amounts (effectively a stretch operation) as well. To stretch a control an extra 50% horizontally when focused, we can use

<control>
  ...
  <animation effect="zoom" end="150,100" center="360,288" time="200">Focus</animation>
  ...
</control>

Conditions for animations

Just as with the conditional visibility, you can add conditions to animations. For example, suppose you want to fade in a control when the window is opened but only when a music/video is playing:

<control>
  ...
  <animation effect="fade" time="100" condition="Player.HasMedia">WindowOpen</animation>
  <animation effect="fade" time="100" condition="Player.HasMedia">WindowClose</animation>
  ...
</control>

Or suppose you want to move a control only when a particular control gains focus. The listview control with id 50 gains focus, the slide animation is triggered and the image control slides off the screen:

<control>
  ...
  <animation effect="slide" time="200" end="1000,0" condition="control.hasfocus(50)">conditional</animation>
  ...
</control>

Related

See also, Skin Controls > Animation for information on using an Animation type control (e.g. for Wait animations)