Page tree

Search


    Recently Updated



    Latest Releases

 MediaPortal 1 1.15.0
            Releasenews | Download
 MediaPortal 2.1 Pre2 
            Releasenews | Download

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

Linear Tweener

Linear Animation

Quadratic Tweener

Quadratic Tweener Easing Out

Quadratic Tweener Easing Out Animation

Quadratic Tweener Easing In

Quadratic Tweener Easing In Animation

Bounce Tweener

Bounce Tweener Easing Out

Bounce Tweener Easing Out Animation

Bounce Tweener Easing InOut

Bounce Tweener Easing InOut Animation

Bounce Tweener Easing In

Bounce Tweener Easing In Animation

Back Tweener

Back Tweener Easing Out

Back Tweener Easing Out Animation

Back Tweener Easing InOut

Back Tweener Easing InOut Animation

Back Tweener Easing In

Back Tweener Easing In Animation

Cubic Tweener

Cubic Tweener Easing Out

Cubic Tweener Easing Out Animation

Cubic Tweener Easing InOut

Cubic Tweener Easing InOut Animation

Cubic Tweener Easing In

Cubic Tweener Easing In Animation

Circle Tweener

Circle Tweener Easing Out

Circle Tweener Easing Out Animation

Circle Tweener Easing InOut

Circle Tweener Easing InOut Animation

Circle Tweener Easing In

Circle Tweener Easing In Animation

Sine Tweener

Sine Tweener Easing Out

Sine Tweener Easing Out Animation

Sine Tweener Easing InOut

Sine Tweener Easing InOut Animation

Sine Tweener Easing In

Sine Tweener Easing In Animation

Elastic Tweener

Elastic Tweener Easing Out

Elastic Tweener Easing Out Animation

Elastic Tweener Easing InOut

Elastic Tweener Easing InOut Animation

Elastic Tweener Easing In

Elastic Tweener Easing In Animation

   

 

This page has no comments.