Tweeners - Revision history

Jeroen at 12:15, 4 April 2017

2017-04-04T12:15:54Z

← Older revision		Revision as of 12:15, 4 April 2017
Line 8:		Line 8:
	== Supported Tweens ==		== Supported Tweens ==

	Currently, ~~XBMC~~'s skin engine supports eight different tweens: "linear", "quadratic", "bounce", "elastic", "cubic", "circle", "sine" and "back". They are set in an animation using the ''tween'' attribute. The animations next to each graph shows how that tween renders straight motion between 2 points. Tweens however aren't restricted to only motion effects, they can be used on alpha as well.		Currently, Kodi's skin engine supports eight different tweens: "linear", "quadratic", "bounce", "elastic", "cubic", "circle", "sine" and "back". They are set in an animation using the ''tween'' attribute. The animations next to each graph shows how that tween renders straight motion between 2 points. Tweens however aren't restricted to only motion effects, they can be used on alpha as well.

	=== Linear Tweener ===		=== Linear Tweener ===

Ronie at 20:03, 5 April 2016

2016-04-05T20:03:34Z

← Older revision		Revision as of 20:03, 5 April 2016
Line 3:		Line 3:
	A Tween defines how an animation progresses from its initial value to its final value. The simplest way this can be accomplished is to go straight from start to finish in equal steps. This results in a smooth transition, however it starts and stops abruptly and tends to be a bit ''unnatural''. Unnatural in the sense that, in the real world, you never see a linear transition. In the real world, transitions (movements, deformations, etc) are always accompanied by ''varying'' degrees of acceleration and deceleration. Some real world examples that come to mind: the movement of a pendulum, a ball bouncing, our breathing pattern, a bungee jump. Tweens basically try to mathematically recreate some of these transitions and can help add naturalism to animations.		A Tween defines how an animation progresses from its initial value to its final value. The simplest way this can be accomplished is to go straight from start to finish in equal steps. This results in a smooth transition, however it starts and stops abruptly and tends to be a bit ''unnatural''. Unnatural in the sense that, in the real world, you never see a linear transition. In the real world, transitions (movements, deformations, etc) are always accompanied by ''varying'' degrees of acceleration and deceleration. Some real world examples that come to mind: the movement of a pendulum, a ball bouncing, our breathing pattern, a bungee jump. Tweens basically try to mathematically recreate some of these transitions and can help add naturalism to animations.

	= What is Easing? =		== What is Easing? ==
	All tweens (except Linear) support an ''easing'' attribute that can be one of "in", "out", or "inout". The Quadratic tweener only supports "in" and "out". The default easing method is "out". Easing is basically the direction of the tween action. Looking at the various graphs below and trying the tweens out will make the concept of easing, easier (hehe, say that ten times in a row) to understand.		All tweens (except Linear) support an ''easing'' attribute that can be one of "in", "out", or "inout". The Quadratic tweener only supports "in" and "out". The default easing method is "out". Easing is basically the direction of the tween action. Looking at the various graphs below and trying the tweens out will make the concept of easing, easier (hehe, say that ten times in a row) to understand.

	= Supported Tweens =		== Supported Tweens ==

	Currently, XBMC's skin engine supports eight different tweens: "linear", "quadratic", "bounce", "elastic", "cubic", "circle", "sine" and "back". They are set in an animation using the ''tween'' attribute. The animations next to each graph shows how that tween renders straight motion between 2 points. Tweens however aren't restricted to only motion effects, they can be used on alpha as well.		Currently, XBMC's skin engine supports eight different tweens: "linear", "quadratic", "bounce", "elastic", "cubic", "circle", "sine" and "back". They are set in an animation using the ''tween'' attribute. The animations next to each graph shows how that tween renders straight motion between 2 points. Tweens however aren't restricted to only motion effects, they can be used on alpha as well.

	== Linear Tweener ==		=== Linear Tweener ===
	[[File:tween_linear.png\|400px\|thumb\|left\|Linear Tweener]]		[[File:tween_linear.png\|400px\|thumb\|left\|Linear Tweener]]
	[[File:anim_linear_in.gif\|none\|frame\|Linear Animation]]		[[File:anim_linear_in.gif\|none\|frame\|Linear Animation]]
	<br style="clear:both" />		<br style="clear:both" />

	== Quadratic Tweener ==		=== Quadratic Tweener ===
	[[File:tween_quadratic_out.png\|400px\|thumb\|left\|Quadratic Tweener Easing Out]]		[[File:tween_quadratic_out.png\|400px\|thumb\|left\|Quadratic Tweener Easing Out]]
	[[File:anim_quadratic_out.gif\|none\|frame\|Quadratic Easing Out Animation]]		[[File:anim_quadratic_out.gif\|none\|frame\|Quadratic Easing Out Animation]]
Line 23:		Line 23:
	<br style="clear:both" />		<br style="clear:both" />

	== Bounce Tweener ==		=== Bounce Tweener ===
	[[File:tween_bounce_out.png\|thumb\|400px\|left\|Bounce Tweener Easing Out]]		[[File:tween_bounce_out.png\|thumb\|400px\|left\|Bounce Tweener Easing Out]]
	[[File:anim_bounce_out.gif\|none\|frame\|Bounce Easing Out Animation]]		[[File:anim_bounce_out.gif\|none\|frame\|Bounce Easing Out Animation]]
Line 34:		Line 34:
	<br style="clear:both" />		<br style="clear:both" />

	== Back Tweener ==		=== Back Tweener ===
	[[File:tween_back_out.png\|thumb\|400px\|left\|Back Tweener Easing Out]]		[[File:tween_back_out.png\|thumb\|400px\|left\|Back Tweener Easing Out]]
	[[File:anim_back_out.gif\|none\|frame\|Back Easing Out Animation]]		[[File:anim_back_out.gif\|none\|frame\|Back Easing Out Animation]]
Line 45:		Line 45:
	<br style="clear:both" />		<br style="clear:both" />

	== Cubic Tweener ==		=== Cubic Tweener ===
	[[File:tween_cubic_out.png\|thumb\|400px\|left\|Cubic Tweener Easing Out]]		[[File:tween_cubic_out.png\|thumb\|400px\|left\|Cubic Tweener Easing Out]]
	[[File:anim_cubic_out.gif\|none\|frame\|Cubic Easing Out Animation]]		[[File:anim_cubic_out.gif\|none\|frame\|Cubic Easing Out Animation]]
Line 56:		Line 56:
	<br style="clear:both" />		<br style="clear:both" />

	== Circle Tweener ==		=== Circle Tweener ===
	[[File:tween_circle_out.png\|thumb\|400px\|left\|Circle Tweener Easing Out]]		[[File:tween_circle_out.png\|thumb\|400px\|left\|Circle Tweener Easing Out]]
	[[File:anim_circle_out.gif\|none\|frame\|Circle Easing Out Animation]]		[[File:anim_circle_out.gif\|none\|frame\|Circle Easing Out Animation]]
Line 67:		Line 67:
	<br style="clear:both" />		<br style="clear:both" />

	== Sine Tweener ==		=== Sine Tweener ===
	[[File:tween_sine_out.png\|thumb\|400px\|left\|Sine Tweener Easing Out]]		[[File:tween_sine_out.png\|thumb\|400px\|left\|Sine Tweener Easing Out]]
	[[File:anim_sine_out.gif\|none\|frame\|Sine Easing Out Animation]]		[[File:anim_sine_out.gif\|none\|frame\|Sine Easing Out Animation]]
Line 78:		Line 78:
	<br style="clear:both" />		<br style="clear:both" />

	== Elastic Tweener ==		=== Elastic Tweener ===
	[[File:tween_elastic_out.png\|thumb\|400px\|left\|Elastic Tweener Easing Out]]		[[File:tween_elastic_out.png\|thumb\|400px\|left\|Elastic Tweener Easing Out]]
	[[File:anim_elastic_out.gif\|none\|frame\|Elastic Easing Out Animation (''animation needs fixing'')]]		[[File:anim_elastic_out.gif\|none\|frame\|Elastic Easing Out Animation (''animation needs fixing'')]]

Ronie at 20:02, 5 April 2016

2016-04-05T20:02:16Z

← Older revision		Revision as of 20:02, 5 April 2016
Line 3:		Line 3:
	A Tween defines how an animation progresses from its initial value to its final value. The simplest way this can be accomplished is to go straight from start to finish in equal steps. This results in a smooth transition, however it starts and stops abruptly and tends to be a bit ''unnatural''. Unnatural in the sense that, in the real world, you never see a linear transition. In the real world, transitions (movements, deformations, etc) are always accompanied by ''varying'' degrees of acceleration and deceleration. Some real world examples that come to mind: the movement of a pendulum, a ball bouncing, our breathing pattern, a bungee jump. Tweens basically try to mathematically recreate some of these transitions and can help add naturalism to animations.		A Tween defines how an animation progresses from its initial value to its final value. The simplest way this can be accomplished is to go straight from start to finish in equal steps. This results in a smooth transition, however it starts and stops abruptly and tends to be a bit ''unnatural''. Unnatural in the sense that, in the real world, you never see a linear transition. In the real world, transitions (movements, deformations, etc) are always accompanied by ''varying'' degrees of acceleration and deceleration. Some real world examples that come to mind: the movement of a pendulum, a ball bouncing, our breathing pattern, a bungee jump. Tweens basically try to mathematically recreate some of these transitions and can help add naturalism to animations.

	== What is Easing? ==		= What is Easing? =
	All tweens (except Linear) support an ''easing'' attribute that can be one of "in", "out", or "inout". The Quadratic tweener only supports "in" and "out". The default easing method is "out". Easing is basically the direction of the tween action. Looking at the various graphs below and trying the tweens out will make the concept of easing, easier (hehe, say that ten times in a row) to understand.		All tweens (except Linear) support an ''easing'' attribute that can be one of "in", "out", or "inout". The Quadratic tweener only supports "in" and "out". The default easing method is "out". Easing is basically the direction of the tween action. Looking at the various graphs below and trying the tweens out will make the concept of easing, easier (hehe, say that ten times in a row) to understand.

Ronie at 19:56, 5 April 2016

2016-04-05T19:56:23Z

← Older revision		Revision as of 19:56, 5 April 2016
Line 1:		Line 1:
			{{mininav\|[[Development]]\|[[Add-on development]]\|[[Skinning]]}}
			<section begin="main content" />
	A Tween defines how an animation progresses from its initial value to its final value. The simplest way this can be accomplished is to go straight from start to finish in equal steps. This results in a smooth transition, however it starts and stops abruptly and tends to be a bit ''unnatural''. Unnatural in the sense that, in the real world, you never see a linear transition. In the real world, transitions (movements, deformations, etc) are always accompanied by ''varying'' degrees of acceleration and deceleration. Some real world examples that come to mind: the movement of a pendulum, a ball bouncing, our breathing pattern, a bungee jump. Tweens basically try to mathematically recreate some of these transitions and can help add naturalism to animations.		A Tween defines how an animation progresses from its initial value to its final value. The simplest way this can be accomplished is to go straight from start to finish in equal steps. This results in a smooth transition, however it starts and stops abruptly and tends to be a bit ''unnatural''. Unnatural in the sense that, in the real world, you never see a linear transition. In the real world, transitions (movements, deformations, etc) are always accompanied by ''varying'' degrees of acceleration and deceleration. Some real world examples that come to mind: the movement of a pendulum, a ball bouncing, our breathing pattern, a bungee jump. Tweens basically try to mathematically recreate some of these transitions and can help add naturalism to animations.

Line 86:		Line 88:
	[[File:anim_elastic_in.gif\|none\|frame\|Elastic Easing In Animation]]		[[File:anim_elastic_in.gif\|none\|frame\|Elastic Easing In Animation]]
	<br style="clear:both" />		<br style="clear:both" />
			<section end="main content" />

	== See also ==		== See also ==

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

2014-04-23T19:03:03Z

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

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

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

>NedBot: Robot: Cosmetic changes

2013-04-27T15:53:47Z

Robot: Cosmetic changes

Show changes

>Martijn at 22:26, 26 January 2013

2013-01-26T22:26:35Z

← Older revision		Revision as of 22:26, 26 January 2013
Line 88:		Line 88:


			==See also==
			'''Development:'''
			* [[Add-on development]]
			* [[Skinning]]

	[[~~category~~:Skin Development]]		[[Category:Skin Development]]

Ned Scott at 23:24, 22 September 2011

2011-09-22T23:24:46Z

← Older revision		Revision as of 23:24, 22 September 2011
Line 1:		Line 1:
	~~=What is a Tween?=~~
	A Tween defines how an animation progresses from its initial value to its final value. The simplest way this can be accomplished is to go straight from start to finish in equal steps. This results in a smooth transition, however it starts and stops abruptly and tends to be a bit ''unnatural''. Unnatural in the sense that, in the real world, you never see a linear transition. In the real world, transitions (movements, deformations, etc) are always accompanied by ''varying'' degrees of acceleration and deceleration. Some real world examples that come to mind: the movement of a pendulum, a ball bouncing, our breathing pattern, a bungee jump. Tweens basically try to mathematically recreate some of these transitions and can help add naturalism to animations.		A Tween defines how an animation progresses from its initial value to its final value. The simplest way this can be accomplished is to go straight from start to finish in equal steps. This results in a smooth transition, however it starts and stops abruptly and tends to be a bit ''unnatural''. Unnatural in the sense that, in the real world, you never see a linear transition. In the real world, transitions (movements, deformations, etc) are always accompanied by ''varying'' degrees of acceleration and deceleration. Some real world examples that come to mind: the movement of a pendulum, a ball bouncing, our breathing pattern, a bungee jump. Tweens basically try to mathematically recreate some of these transitions and can help add naturalism to animations.

>D4rk: /* Supported Tweens */

2007-07-26T09:55:02Z

Supported Tweens

← Older revision		Revision as of 09:55, 26 July 2007
Line 7:		Line 7:
	=Supported Tweens=		=Supported Tweens=

	Currently, XBMC's skin engine supports eight different tweens: "linear", "quadratic", "bounce", "elastic", "cubic", "circle", "sine" and "back". They are set in an animation using the ''tween'' attribute. The animations next to each graph~~, show~~ how that tween renders straight motion between 2 points. Tweens however aren't restricted to only motion effects, they can be used on alpha as well.		Currently, XBMC's skin engine supports eight different tweens: "linear", "quadratic", "bounce", "elastic", "cubic", "circle", "sine" and "back". They are set in an animation using the ''tween'' attribute. The animations next to each graph shows how that tween renders straight motion between 2 points. Tweens however aren't restricted to only motion effects, they can be used on alpha as well.

	==Linear Tweener==		==Linear Tweener==

>D4rk: /* Supported Tweens */

2007-07-26T09:43:47Z

Supported Tweens

← Older revision		Revision as of 09:43, 26 July 2007
Line 7:		Line 7:
	=Supported Tweens=		=Supported Tweens=

	Currently, XBMC's skin engine supports eight different tweens: "linear", "quadratic", "bounce", "elastic", "cubic", "circle", "sine" and "back". They are set in an animation using the ''tween'' attribute.		Currently, XBMC's skin engine supports eight different tweens: "linear", "quadratic", "bounce", "elastic", "cubic", "circle", "sine" and "back". They are set in an animation using the ''tween'' attribute. The animations next to each graph, show how that tween renders straight motion between 2 points. Tweens however aren't restricted to only motion effects, they can be used on alpha as well.

	==Linear Tweener==		==Linear Tweener==