Tweeners

From Official Kodi Wiki
Revision as of 09:16, 26 July 2007 by >D4rk
Jump to navigation Jump to search

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.

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

Linear Tweener

Linear Tweener
Linear Animation


Quadratic Tweener

Quadratic Tweener Easing In
Quadratic Easing In Animation
Quadratic Tweener Easing Out
Quadratic Easing Out 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


Elastic Tweener

Elastic Tweener Easing In
Elastic Tweener Easing InOut
Elastic Tweener Easing Out


Cubic Tweener

Cubic Tweener Easing In
Cubic Tweener Easing InOut
Cubic Tweener Easing Out


Sine Tweener

Sine Tweener Easing In
Sine Tweener Easing InOut
Sine Tweener Easing Out


Circle Tweener

Circle Tweener Easing In
Circle Tweener Easing InOut
Circle Tweener Easing Out


Back Tweener

Back Tweener Easing In
Back Tweener Easing InOut
Back Tweener Easing Out