Animating your skin - Revision history

Pete (NZ): /* Examples */

2024-10-30T13:10:08Z

Examples

← Older revision		Revision as of 13:10, 30 October 2024
Line 91:		Line 91:
	</syntaxhighlight>		</syntaxhighlight>

	This causes Kodi 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.		This causes Kodi 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. When it's finished, it will fade out again over 400ms.
	----		----
	You can also specify different ~~transistion~~ times for ~~transistioning~~ in and out as follows:		You can also specify different transition times for transitioning in and out, as follows:

	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
Line 101:		Line 101:


	This, when used as the animation tag for the ~MusicOSD dialog, will cause it to fade in quickly (in 100ms) when activated ~~and the~~ fade out again slowly ~~(in 1~~ second (1000ms)~~) when it's cancelled~~.		This, when used as the animation tag for the ~MusicOSD dialog, will cause it to fade in quickly (in 100ms) when activated. When it's cancelled, it will fade out again slowly over a second (1000ms).
	----		----
	You can also specify that a control should always fade in when the window is opened by using		You can also specify that a control should always fade in when the window is opened, by using:

	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
Line 112:		Line 112:

	----		----
	There is also ability to add delays preceding the ~~transistions~~. For instance		There is also the ability to add delays preceding the transitions. For instance,...

	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
Line 118:		Line 118:
	</syntaxhighlight>		</syntaxhighlight>

	would mean that the control will fade out after a delay of 200ms. This is useful for "crossfade" 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).		...would mean that the control will fade out after a delay of 200ms. This is useful for "crossfade" 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).
	----		----
	There are also slide effects available.		There are also slide effects available:

	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
Line 126:		Line 126:
	</syntaxhighlight>		</syntaxhighlight>

	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.		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. An Unfocus animation will make it slide back gracefully.
	----		----
	There are also rotate effects available.		There are also rotate effects available:

	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
Line 134:		Line 134:
	</syntaxhighlight>		</syntaxhighlight>

	will rotate the control 30 degrees counter clockwise about the center of a PAL screen (360,288) when the control becomes focused.		This will rotate the control 30 degrees counter clockwise about the center of a PAL screen (360,288) when the control becomes focused.
	----		----
	And we also have zoom effects.		And we also have zoom effects:

	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
Line 142:		Line 142:
	</syntaxhighlight>		</syntaxhighlight>

	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		This 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...

	<syntaxhighlight lang="xml" enclose="div">		<syntaxhighlight lang="xml" enclose="div">
Line 170:		Line 170:
	</syntaxhighlight>		</syntaxhighlight>

	This will cause the control to start at 20% opacity ~~and~~ fade to full in 200 milliseconds ~~and~~ fade back to 20% opacity and keeping looping in that fashion		This will cause the control to start at 20% opacity, then fade to full in 200 milliseconds, then fade back to 20% opacity -- and keeping looping in that fashion.
	----		----
	An example of a fadediffuse animation with a pulse:		An example of a fadediffuse animation with a pulse:
Line 189:		Line 189:
	</syntaxhighlight>		</syntaxhighlight>

	This will cause the control to fade in over 200 ms, then zoom to 150% it's width from the center of the control.		This will cause the control to fade in over 200 ms, then zoom to 150% of it's width, from the center of the control.

	<section end="main content" />		<section end="main content" />

Sarbes: /* Examples */

2022-06-26T13:37:54Z

Examples

← Older revision		Revision as of 13:37, 26 June 2022
Line 171:		Line 171:

	This will cause the control to start at 20% opacity and fade to full in 200 milliseconds and fade back to 20% opacity and keeping looping in that fashion		This will cause the control to start at 20% opacity and fade to full in 200 milliseconds and fade back to 20% opacity and keeping looping in that fashion
			----
			An example of a fadediffuse animation with a pulse:

			<syntaxhighlight lang="xml" enclose="div">
			<animation effect="fadediffuse" start="FFFF0000" start="FF00FF00" time="200" condition="Control.HasFocus(2)" pulse="true">Conditional</animation>
			</syntaxhighlight>

			Similar to the example above, but it pulses between red and green.
	----		----
	An example of two animations at once:		An example of two animations at once:
Line 184:		Line 192:

	<section end="main content" />		<section end="main content" />

	== See also ==		== See also ==
	'''Development:'''		'''Development:'''

Sarbes: /* Attributes */

2022-06-26T13:34:03Z

Attributes

← Older revision		Revision as of 13:34, 26 June 2022
Line 46:		Line 46:
	; effect		; effect
	: Specifies the effect to use. Currently “fade”, fadediffuse, “slide”, “rotate”, "rotatex", "rotatey", and “zoom” are supported.		: Specifies the effect to use. Currently “fade”, fadediffuse, “slide”, “rotate”, "rotatex", "rotatey", and “zoom” are supported.
			: fade - influences the opaqueness
			: fadediffuse - influences the opaqueness and color
	: rotatex - rotates a control around the X-Axis (horizontal)		: rotatex - rotates a control around the X-Axis (horizontal)
	: rotatey - rotates a control around the Y-Axis (vertical)		: rotatey - rotates a control around the Y-Axis (vertical)
	: rotate - rotates a control around the Z-Axis		: rotate - rotates a control around the Z-Axis
			: slide - translates the control
			: zoom - magnifies/minifies the control
	; time :		; time :
	Specifies the length of time that the animation will run, in milliseconds.		Specifies the length of time that the animation will run, in milliseconds.

Sarbes: /* Attributes */

2022-06-26T13:29:56Z

Attributes

← Older revision		Revision as of 13:29, 26 June 2022
Line 45:		Line 45:
	The attributes available are as follows. Note that all attributes, like tags, are case sensitive		The attributes available are as follows. Note that all attributes, like tags, are case sensitive
	; effect		; effect
	: Specifies the effect to use. Currently “fade”, “slide”, “rotate”, "rotatex", "rotatey", and “zoom” are supported.		: Specifies the effect to use. Currently “fade”, fadediffuse, “slide”, “rotate”, "rotatex", "rotatey", and “zoom” are supported.
	: rotatex - rotates a control around the X-Axis (horizontal)		: rotatex - rotates a control around the X-Axis (horizontal)
	: rotatey - rotates a control around the Y-Axis (vertical)		: rotatey - rotates a control around the Y-Axis (vertical)
Line 55:		Line 55:
	; start		; start
	: The start state of the control for this transistion.		: The start state of the control for this transistion.
	:* For fades, this is the opaqueness as a percentage (ie start="100" is fully opaque, start="0" is fully transparent.		:* 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 diffuse fades, this is the color as a "AARRGGBB" (ie start="FFFF0000" is fully red opaque; start="7F00FF00" is green, half 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 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).		:* 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).

Ronie: /* Attributes */

2016-04-09T12:14:36Z

Attributes

← Older revision		Revision as of 12:14, 9 April 2016
Line 59:		Line 59:
	:* 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 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).		:* 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).
	:Note: With zooms you can also specify the coordinates and dimensions of the texture. (ie start="~~posx~~,~~posy~~,width,height").		:Note: With zooms you can also specify the coordinates and dimensions of the texture. (ie start="left,top,width,height").
	; end		; end
	: The end state of the control for this transistion. 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.		: The end state of the control for this transistion. 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.

Uixtung at 18:40, 7 September 2015

2015-09-07T18:40:58Z

← Older revision		Revision as of 18:40, 7 September 2015
Line 4:		Line 4:

	== Window Animations ==		== Window Animations ==
	There are two valid window ~~animation~~ – 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.		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 ==		== Control Animations ==

NedBot: Bot: Automated text replacement (- XBMC + Kodi )

2015-05-04T08:24:36Z

Bot: Automated text replacement (- XBMC + Kodi )

← Older revision		Revision as of 08:24, 4 May 2015
Line 1:		Line 1:
	{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}		{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}
	<section begin="main content" />		<section begin="main content" />
	The ~~XBMC~~ 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.		The Kodi 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 ==		== Window Animations ==
Line 65:		Line 65:
	: Amount to accelerate or decelerate during a “slide”, “zoom” or “rotate” transistion. 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)		: Amount to accelerate or decelerate during a “slide”, “zoom” or “rotate” transistion. 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
	: Center of the rotation or zoom to perform with a “rotate” or “zoom” transistion. 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 ~~XBMC~~ automatically zoom from the center of the control.		: Center of the rotation or zoom to perform with a “rotate” or “zoom” transistion. 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 Kodi automatically zoom from the center of the control.
	: Center shifts the rotational axis at the level, rotatex - center="y,z" coordinates, rotatey - center="x,z" coordinates, rotate - center="x,y" coordinates		: Center shifts the rotational axis at the level, rotatex - center="y,z" coordinates, rotatey - center="x,z" coordinates, rotate - center="x,y" coordinates
	; condition		; condition
Line 86:		Line 86:
	</syntaxhighlight>		</syntaxhighlight>

	This causes ~~XBMC~~ 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.		This causes Kodi 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.
	----		----
	You can also specify different transistion times for transistioning in and out as follows:		You can also specify different transistion times for transistioning in and out as follows:

NedBot: Robot: Substituting template: Name

2014-06-05T20:10:57Z

Robot: Substituting template: Name

← Older revision		Revision as of 20:10, 5 June 2014
Line 1:		Line 1:
	{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}		{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}
	<section begin="main content" />		<section begin="main content" />
	The ~~{{name}}~~ 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.		The XBMC 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 ==		== Window Animations ==
Line 65:		Line 65:
	: Amount to accelerate or decelerate during a “slide”, “zoom” or “rotate” transistion. 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)		: Amount to accelerate or decelerate during a “slide”, “zoom” or “rotate” transistion. 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
	: Center of the rotation or zoom to perform with a “rotate” or “zoom” transistion. 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 ~~{{name}}~~ automatically zoom from the center of the control.		: Center of the rotation or zoom to perform with a “rotate” or “zoom” transistion. 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 XBMC automatically zoom from the center of the control.
	: Center shifts the rotational axis at the level, rotatex - center="y,z" coordinates, rotatey - center="x,z" coordinates, rotate - center="x,y" coordinates		: Center shifts the rotational axis at the level, rotatex - center="y,z" coordinates, rotatey - center="x,z" coordinates, rotate - center="x,y" coordinates
	; condition		; condition
Line 86:		Line 86:
	</syntaxhighlight>		</syntaxhighlight>

	This causes ~~{{name}}~~ 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.		This causes XBMC 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.
	----		----
	You can also specify different transistion times for transistioning in and out as follows:		You can also specify different transistion times for transistioning in and out as follows:

NedBot: Bot: Automated text replacement (-XBMC +{{name}})

2014-06-05T00:57:57Z

Bot: Automated text replacement (-XBMC +{{name}})

← Older revision		Revision as of 00:57, 5 June 2014
Line 1:		Line 1:
	{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}		{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}
	<section begin="main content" />		<section begin="main content" />
	The ~~XBMC~~ 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.		The {{name}} 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 ==		== Window Animations ==
Line 65:		Line 65:
	: Amount to accelerate or decelerate during a “slide”, “zoom” or “rotate” transistion. 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)		: Amount to accelerate or decelerate during a “slide”, “zoom” or “rotate” transistion. 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
	: Center of the rotation or zoom to perform with a “rotate” or “zoom” transistion. 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 ~~XBMC~~ automatically zoom from the center of the control.		: Center of the rotation or zoom to perform with a “rotate” or “zoom” transistion. 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 {{name}} automatically zoom from the center of the control.
	: Center shifts the rotational axis at the level, rotatex - center="y,z" coordinates, rotatey - center="x,z" coordinates, rotate - center="x,y" coordinates		: Center shifts the rotational axis at the level, rotatex - center="y,z" coordinates, rotatey - center="x,z" coordinates, rotate - center="x,y" coordinates
	; condition		; condition
Line 86:		Line 86:
	</syntaxhighlight>		</syntaxhighlight>

	This causes ~~XBMC~~ 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.		This causes {{name}} 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.
	----		----
	You can also specify different transistion times for transistioning in and out as follows:		You can also specify different transistion times for transistioning in and out as follows:

NedBot: Robot: Changing Category:Skin Development to Category:Skin development

2014-04-23T19:00:43Z

Robot: Changing Category:Skin Development to Category:Skin development

← Older revision		Revision as of 19:00, 23 April 2014
Line 184:		Line 184:
	* [[Skinning]]		* [[Skinning]]

	[[Category:Skin ~~Development~~]]		[[Category:Skin development]]