VEGAS JS

Class: Tween

system.transitions. Tween

new Tween()

The Tween class lets you use to move, resize, and fade visual elements easily on your applications.

The Tween class lets you use to move, resize, and fade visual elements easily on the stage of your applications by specifying a property of the target movieclips or sprites to be tween animated over a number of frames or seconds.

The Tween class also lets you specify a variety of easing methods.

Easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic.

Tutorials:
Example
"use strict" ;

window.onload = function()
{
    if( !vegas )
    {
        throw new Error( "The VEGAS library is not found." ) ;
    }

    // ----- imports

    var global   = vegas.global ; // jshint ignore:line
    var trace    = vegas.trace  ; // jshint ignore:line
    var core     = vegas.core   ; // jshint ignore:line
    var system   = vegas.system ; // jshint ignore:line

    var Tween = system.transitions.Tween ;

    // ----- behaviors

    var change = function( tween )
    {
        trace( 'progress ' + core.dump(tween.target) ) ;
        render() ;
    }

    var finish = function()
    {
        trace( 'finish' ) ;
        // tween.duration = 120 ;
        // tween.from = null ;
        // tween.to   = tween.to === to ? from : to ;
        // tween.run() ;
    }

    var start = function()
    {
        trace( 'start' ) ;
    }

    // ----- initialize

    var canvas  = document.getElementById('canvas') ;
    var context = canvas.getContext('2d');

    canvas.width  = 800;
    canvas.height = 600;

    var color   = '#FF0000' ;
    var radius  = 25;

    var from    = { x : 100 , y : 100 } ;
    var to      = { x : 500 , y : 400 } ;
    var target  = { x : 0   , y : 0 } ;

    var easings = null ;

    easings = { x : core.easings.backOut , y : core.easings.sineOut } ;

    var tween = new Tween
    ({
        auto       : false,
        duration   : 48 ,
        useSeconds : false ,
        easing     : core.easings.backOut,
        easings    : easings,
        from       : from ,
        target     : target ,
        to         : to
    }) ;

    //tween.easing = core.easings.cubicOut ;
    //tween.easing = core.easings.elasticOut ;
    //tween.easing = core.easings.sineOut ;

    // tween.fps = 60  ; // use an internal Timer instance or a FrameTimer instance if fps is NaN

    tween.looping = true ;

    tween.finishIt.connect( finish ) ;
    tween.changeIt.connect( change ) ;
    tween.startIt.connect( start ) ;

    // ----- render

    var render = function()
    {
        var width  = canvas.width ;
        var height = canvas.height ;

        context.clearRect(0, 0, width, height);

        context.fillStyle = '#333333' ;
        context.fillRect(0, 0, width, height );

        context.beginPath();
        context.arc( target.x, target.y, radius, 0, Math.PI * 2, false );
        context.closePath();
        context.fillStyle = color ;
        context.fill();
    }

    render() ;

    tween.run() ;
}

Extends

Members

duration :number

Indicates the duration of the tweened animation in frames or seconds (default 0).

Type:
  • number
Inherited From:
Default Value:
  • false

easing :function

Defines the easing method reference of this entry.

Type:
  • function
Inherited From:
See:

easings :Object

Determinates the generic object with all custom easing functions to interpolate the transition of the specific component in time. If this object is null, the default numeric attributes of the target are used.

Type:
  • Object

fps :number

Indicates the number of frames per second of the tweened animation.

Type:
  • number
Inherited From:
Default Value:
  • NaN

from :Object

Determinates the generic object with all numeric attributes to start the transition. If this object is null, the default numeric attributes of the target are used.

Type:
  • Object

position :number

The current position of this tween.

Type:
  • number
Inherited From:
Default Value:
  • 0

prevTime :number

Indicates the internal previous time value.

Type:
  • number
Inherited From:

set :function

Set the TweenUnit properties.

Type:
  • function
Inherited From:
See:

stopped :boolean

Indicates if the motion is stopped.

Type:
  • boolean
Inherited From:
Default Value:
  • false

target :Object

Indicates the target reference of the object contrains by the Motion effect.

Type:
  • Object
Overrides:

to :Object

Determinates the generic object with all properties to change inside.

Type:
  • Object

useSeconds :boolean

Defined if the Motion used seconds or not.

Type:
  • boolean
Inherited From:
Default Value:
  • false

Methods

clone()

Returns a shallow copy of this object.

Overrides:
Returns:

a shallow copy of this object.

nextFrame()

Forwards the tweened animation to the next frame.

Inherited From:

notifyFinished()

Notify when the process is finished.

prevFrame()

Directs the tweened animation to the frame previous to the current frame.

Inherited From:

resume()

Resumes a tweened animation from its stopped point in the animation.

Inherited From:

rewind(time)

Rewinds a tweened animation to the beginning of the tweened animation.

Parameters:
Name Type Description
time number

The time value to rewind the motion.
Inherited From:

run()

Runs the process

Overrides:

setTime(time)

Sets the current time within the duration of the animation.

Parameters:
Name Type Description
time number

The time value to rewind the motion.
Inherited From:

startInterval()

Starts the internal interval of the tweened animation.

Inherited From:

stop()

Stops the tweened animation at its current position.

Inherited From:

stopInterval()

Stops the intenral interval of the tweened animation.

Inherited From:

update()

Update the current object.

Overrides: