Tweeners: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
>D4rk
No edit summary
mNo edit summary
 
(12 intermediate revisions by 6 users not shown)
Line 1: Line 1:
=What is a Tween?=
{{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.


==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.
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 ===
[[Image:tween_linear.png|400px|thumb|left|Linear Tweener]]
[[File:tween_linear.png|400px|thumb|left|Linear Tweener]]
[[Image: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 ===
[[Image:tween_quadratic_in.png|400px|thumb|left|Quadratic Tweener Easing In]]
[[File:tween_quadratic_out.png|400px|thumb|left|Quadratic Tweener Easing Out]]
[[Image:anim_quadratic_in.gif|none|frame|Quadratic Easing In Animation]]
[[File:anim_quadratic_out.gif|none|frame|Quadratic Easing Out Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_quadratic_out.png|400px|thumb|left|Quadratic Tweener Easing Out]]
[[File:tween_quadratic_in.png|400px|thumb|left|Quadratic Tweener Easing In]]
[[Image:anim_quadratic_out.gif|none|frame|Quadratic Easing Out Animation]]
[[File:anim_quadratic_in.gif|none|frame|Quadratic Easing In Animation]]
<br style="clear:both" />
<br style="clear:both" />


==Bounce Tweener==
=== Bounce Tweener ===
[[Image:tween_bounce_out.png|thumb|400px|left|Bounce Tweener Easing Out]]
[[File:tween_bounce_out.png|thumb|400px|left|Bounce Tweener Easing Out]]
[[Image:anim_bounce_out.gif|none|frame|Bounce Easing Out Animation]]
[[File:anim_bounce_out.gif|none|frame|Bounce Easing Out Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_bounce_inout.png|400px|thumb|left|Bounce Tweener Easing InOut]]
[[File:tween_bounce_inout.png|400px|thumb|left|Bounce Tweener Easing InOut]]
[[Image:anim_bounce_inout.gif|none|frame|Bounce Easing InOut Animation]]
[[File:anim_bounce_inout.gif|none|frame|Bounce Easing InOut Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_bounce_in.png|400px|thumb|left|Bounce Tweener Easing In]]
[[File:tween_bounce_in.png|400px|thumb|left|Bounce Tweener Easing In]]
[[Image:anim_bounce_in.gif|none|frame|Bounce Easing In Animation]]
[[File:anim_bounce_in.gif|none|frame|Bounce Easing In Animation]]
<br style="clear:both" />
<br style="clear:both" />


==Elastic Tweener==
=== Back Tweener ===
[[Image:tween_elastic_out.png|thumb|400px|left|Elastic Tweener Easing Out]]
[[File:tween_back_out.png|thumb|400px|left|Back Tweener Easing Out]]
[[Image:anim_elastic_out.gif|none|frame|Elastic Easing Out Animation]]
[[File:anim_back_out.gif|none|frame|Back Easing Out Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_elastic_inout.png|400px|thumb|left|Elastic Tweener Easing InOut]]
[[File:tween_back_inout.png|400px|thumb|left|Back Tweener Easing InOut]]
[[Image:anim_elastic_inout.gif|none|frame|Elastic Easing InOut Animation]]
[[File:anim_back_inout.gif|none|frame|Back Easing InOut Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_elastic_in.png|400px|thumb|left|Elastic Tweener Easing In]]
[[File:tween_back_in.png|400px|thumb|left|Back Tweener Easing In]]
[[Image:anim_elastic_in.gif|none|frame|Elastic Easing In Animation]]
[[File:anim_back_in.gif|none|frame|Back Easing In Animation]]
<br style="clear:both" />
<br style="clear:both" />


==Cubic Tweener==
=== Cubic Tweener ===
[[Image:tween_cubic_in.png|400px|thumb|left|Cubic Tweener Easing In]]
[[File:tween_cubic_out.png|thumb|400px|left|Cubic Tweener Easing Out]]
[[Image:anim_cubic_in.gif|none|frame|Cubic Easing In Animation]]
[[File:anim_cubic_out.gif|none|frame|Cubic Easing Out Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_cubic_inout.png|400px|thumb|left|Cubic Tweener Easing InOut]]
[[File:tween_cubic_inout.png|400px|thumb|left|Cubic Tweener Easing InOut]]
[[Image:anim_cubic_inout.gif|none|frame|Cubic Easing InOut Animation]]
[[File:anim_cubic_inout.gif|none|frame|Cubic Easing InOut Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_cubic_out.png|thumb|400px|left|Cubic Tweener Easing Out]]
[[File:tween_cubic_in.png|400px|thumb|left|Cubic Tweener Easing In]]
[[Image:anim_cubic_out.gif|none|frame|Cubic Easing Out Animation]]
[[File:anim_cubic_in.gif|none|frame|Cubic Easing In Animation]]
<br style="clear:both" />
<br style="clear:both" />


==Sine Tweener==
=== Circle Tweener ===
[[Image:tween_sine_in.png|400px|thumb|left|Sine Tweener Easing In]]
[[File:tween_circle_out.png|thumb|400px|left|Circle Tweener Easing Out]]
[[Image:anim_sine_in.gif|none|frame|Cubic Sine In Animation]]
[[File:anim_circle_out.gif|none|frame|Circle Easing Out Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_sine_inout.png|400px|thumb|left|Sine Tweener Easing InOut]]
[[File:tween_circle_inout.png|400px|thumb|left|Circle Tweener Easing InOut]]
[[Image:anim_sine_inout.gif|none|frame|Sine Easing InOut Animation]]
[[File:anim_circle_inout.gif|none|frame|Circle Easing InOut Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_sine_out.png|thumb|400px|left|Sine Tweener Easing Out]]
[[File:tween_circle_in.png|400px|thumb|left|Circle Tweener Easing In]]
[[Image:anim_sine_out.gif|none|frame|Sine Easing Out Animation]]
[[File:anim_circle_in.gif|none|frame|Circle Easing In Animation]]
<br style="clear:both" />
<br style="clear:both" />


==Circle Tweener==
=== Sine Tweener ===
[[Image:tween_circle_in.png|400px|thumb|left|Circle Tweener Easing In]]
[[File:tween_sine_out.png|thumb|400px|left|Sine Tweener Easing Out]]
[[File:anim_sine_out.gif|none|frame|Sine Easing Out Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_circle_inout.png|400px|thumb|left|Circle Tweener Easing InOut]]
[[File:tween_sine_inout.png|400px|thumb|left|Sine Tweener Easing InOut]]
[[File:anim_sine_inout.gif|none|frame|Sine Easing InOut Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_circle_out.png|thumb|400px|left|Circle Tweener Easing Out]]
[[File:tween_sine_in.png|400px|thumb|left|Sine Tweener Easing In]]
[[File:anim_sine_in.gif|none|frame|Sine Easing In Animation]]
<br style="clear:both" />
<br style="clear:both" />


==Back Tweener==
=== Elastic Tweener ===
[[Image:tween_back_in.png|400px|thumb|left|Back Tweener Easing In]]
[[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'')]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_back_inout.png|400px|thumb|left|Back Tweener Easing InOut]]
[[File:tween_elastic_inout.png|400px|thumb|left|Elastic Tweener Easing InOut]]
[[File:anim_elastic_inout.gif|none|frame|Elastic Easing InOut Animation]]
<br style="clear:both" />
<br style="clear:both" />
[[Image:tween_back_out.png|thumb|400px|left|Back Tweener Easing Out]]
[[File:tween_elastic_in.png|400px|thumb|left|Elastic Tweener Easing In]]
[[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 ==
'''Development:'''
* [[Add-on development]]
* [[Skinning]]


[[category:Skin Development]]
[[Category:Skin development]]

Latest revision as of 12:15, 4 April 2017

Home icon grey.png   ▶ Development ▶ Add-on development ▶ Skinning ▶ Tweeners

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?

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

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
Linear Animation


Quadratic Tweener

Quadratic Tweener Easing Out
Quadratic Easing Out Animation


Quadratic Tweener Easing In
Quadratic Easing In Animation


Bounce Tweener

Bounce Tweener Easing Out
Bounce Easing Out Animation


Bounce Tweener Easing InOut
Bounce Easing InOut Animation


Bounce Tweener Easing In
Bounce Easing In Animation


Back Tweener

Back Tweener Easing Out
Back Easing Out Animation


Back Tweener Easing InOut
Back Easing InOut Animation


Back Tweener Easing In
Back Easing In Animation


Cubic Tweener

Cubic Tweener Easing Out
Cubic Easing Out Animation


Cubic Tweener Easing InOut
Cubic Easing InOut Animation


Cubic Tweener Easing In
Cubic Easing In Animation


Circle Tweener

Circle Tweener Easing Out
Circle Easing Out Animation


Circle Tweener Easing InOut
Circle Easing InOut Animation


Circle Tweener Easing In
Circle Easing In Animation


Sine Tweener

Sine Tweener Easing Out
Sine Easing Out Animation


Sine Tweener Easing InOut
Sine Easing InOut Animation


Sine Tweener Easing In
Sine Easing In Animation


Elastic Tweener

Elastic Tweener Easing Out
Elastic Easing Out Animation (animation needs fixing)


Elastic Tweener Easing InOut
Elastic Easing InOut Animation


Elastic Tweener Easing In
Elastic Easing In Animation



See also

Development: