Animations

From DevWiki

Jump to: navigation, search

Applications,Boxee GUI API

Contents


Overview

Animations are available and can be defined for each control on specific events. The 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. You may also have more than one animation of each type.


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. You can, however, have more than one animation performed for the windowopen or windowclose animation.


Control Animations

There are 8 valid control animations listed below. The last 2 work differently then the others. VisibleChange constructs the Visible animation, then reverses it for the Hidden animation automatically. Conditional allows developers to have animations executed based on Boolean Conditions.

Animation Types

Type Description
WindowOpen Performed once only when the window is opened.
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 or the python api.
Hidden Performed when the control becomes hidden via its <visible> tag or the python api.
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.

Animation Attributes

Attribute Description
effect Specifies the effect to use. Currently fade, slide, rotate, 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 the animation, differs for each effect. For fades, this is the opaqueness as a percentage (ie 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 it's 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. (ie start="50,60" will start the control at 50% of it's horizontal size and 60% of it's 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. (Also see the tween attribute)
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. You can set center="auto" to have Boxee automatically zoom from the center of the control.
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 behavior (the Hidden animation will take its place). Defaults to true.
loop If true will make your fade animation loop. (jump back to the start after it reaches the end)
pulse If true will make your fade animation pulse. (Bounce back from start to end to start to end ...)
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 XBMC's excellent example of Tweeners for more information.
easing Easing basically defines the direction of the tween and can be one of out, inout and in. The default value is out. See XBMC's Easing documentation for more information.


Format/Structure

The animation tag is formatted as follows for a single animation:

  1. <animation effect="EFFECT" attributes>TYPE</animation>

For multiple/combined animations in a single event, use the following structure:

  1. <animation type="TYPE" condition="Focus" reversible="false">
  2.   <effect type="EFFECT" other_attributes />
  3.    ...
  4.   <effect type="EFFECT" other_attributes />
  5. </animation>


Examples

Fade in/out with Player.HasAudio. This example causes Boxee 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.

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


Fade in/out with WindowOpen and WindowClose. You can also specify different transition times for transitioning in and out. This example will cause the control to fade in quickly (100ms) when the window is activated and the fade out again slowly (1000ms) when it's closed.

  1. <animation effect="fade" time="100">WindowOpen</animation>
  2. <animation effect="fade" time="1000">WindowClose</animation>


Fade in with Hidden over 200ms after a 200ms delay. 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).

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


Slide control 30 pixels with Focus over 200ms. 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 it's normal position. A UnFocus animation will make it slide back gracefully.

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


Rotate control 30 degrees with UnFocus over 200ms. This will rotate the control 30 degrees counter clockwise based off the set center (360,288) when the control becomes unfocused. Note that you can also use center="auto".

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


Zoom control to 120% with Focus over 200ms. This will zoom the control to 120% of its normal size when the control becomes focused, with the zoom centered at the center of the control.

  1. <animation effect="zoom" end="120" center="auto" time="200">Focus</animation>


Zoom control to 80% with Conditional over 200ms. This will zoom control (with id of 120) to 80% of its normal size when the condition statement returns true, with the zoom centered at the center of the control.

  1. <animation effect="zoom" end="80" center="auto" time="200" condition="Control.HasFocus(120)">Conditional</animation>


Zoom control to 200% with Conditional over 200ms. This will zoom control (with id of 480) to 200% of its normal size when the condition statement returns true, with the zoom centered at the center of the control.

  1. <animation effect="zoom" end="200" center="auto" time="200" condition="Control.HasFocus(480) + Player.IsPlaying">Conditional</animation>


Zoom & Fade control with Focus. This will cause the control to fade in over 200 ms, then zoom to 150% it's width from the center of the control when control gains focus.

  1. <animation type="WindowOpen">
  2.   <effect type="fade" start="0" end="100" time="200"/>
  3.   <effect type="zoom" end="150,100" center="auto" time="200" delay="200"/>
  4. </animation>
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox