Fork MediaPortal on GitHub
MediaPortal Windows Media Center
MediaPortal Wiki > MediaPortal 1 > Contribute > Skins > Skin Architecture > Animations > Tweeners

Tweeners

Was this page helpful?

    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, Mediaportal'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

    Tween_linear.png

    Anim_linear_in.gif

    Linear Tweener

    Linear Animation

    Quadratic Tweener

    Tween_quadratic_out.png

    Anim_quadratic_out.gif

    Quadratic Tweener Easing Out

    Quadratic Tweener Easing Out Animation

    Tween_quadratic_in.png

    Anim_quadratic_in.gif

    Quadratic Tweener Easing In

    Quadratic Tweener Easing In Animation

    Bounce Tweener

    Tween_bounce_out.png

    Anim_bounce_out.gif

    Bounce Tweener Easing Out

    Bounce Tweener Easing Out Animation

    Tween_bounce_inout.png

    Anim_bounce_inout.gif

    Bounce Tweener Easing InOut

    Bounce Tweener Easing InOut Animation

    Tween_bounce_in.png

    Anim_bounce_in.gif

    Bounce Tweener Easing In

    Bounce Tweener Easing In Animation

    Back Tweener

    Tween_back_out.png

    Anim_back_out.gif

    Back Tweener Easing Out

    Back Tweener Easing Out Animation

    Tween_back_inout.png

    Anim_back_inout.gif

    Back Tweener Easing InOut

    Back Tweener Easing InOut Animation

    Tween_back_in.png

    Anim_back_in.gif

    Back Tweener Easing In

    Back Tweener Easing In Animation

    Cubic Tweener

    Tween_cubic_out.png

    Anim_cubic_out.gif

    Cubic Tweener Easing Out

    Cubic Tweener Easing Out Animation

    Tween_cubic_inout.png

    Anim_cubic_inout.gif

    Cubic Tweener Easing InOut

    Cubic Tweener Easing InOut Animation

    Tween_cubic_in.png

    Anim_cubic_in.gif

    Cubic Tweener Easing In

    Cubic Tweener Easing In Animation

    Circle Tweener

    Tween_circle_out.png

    Anim_circle_out.gif

    Circle Tweener Easing Out

    Circle Tweener Easing Out Animation

    Tween_circle_inout.png

    Anim_circle_inout.gif

    Circle Tweener Easing InOut

    Circle Tweener Easing InOut Animation

    Tween_circle_in.png

    Anim_circle_in.gif

    Circle Tweener Easing In

    Circle Tweener Easing In Animation

    Sine Tweener

    Tween_sine_out.png

    Anim_sine_out.gif

    Sine Tweener Easing Out

    Sine Tweener Easing Out Animation

    Tween_sine_inout.png

    Anim_sine_inout.gif

    Sine Tweener Easing InOut

    Sine Tweener Easing InOut Animation

    Tween_sine_in.png

    Anim_sine_in.gif

    Sine Tweener Easing In

    Sine Tweener Easing In Animation

    Elastic Tweener

    Tween_elastic_out.png

    Anim_elastic_out.gif

    Elastic Tweener Easing Out

    Elastic Tweener Easing Out Animation

    Tween_elastic_inout.png

    Anim_elastic_inout.gif

    Elastic Tweener Easing InOut

    Elastic Tweener Easing InOut Animation

    Tween_elastic_in.png

    Anim_elastic_in.gif

    Elastic Tweener Easing In

    Elastic Tweener Easing In Animation




    Tag page (Edit tags)
    • No tags
    Running the latest version?

    V1.8.0 - released July 2014
    Releasenews | Download
    Changelog
     | Requirements
    HTPC
    Team-MediaPortal
     
    About
    Contact |  Press
    Partners