API Docs for: 6.0.1
Show:

Tween Class

Tween

Instantiation

  • scrawl.makeTween()

Purpose

  • Defines a set of attribute update definitions for objects

Access

  • scrawl.tween.TWEENNAME - for the Tween object

Tween functions

  • A Tween can be deleted by calling the kill() function on it.

Constructor

Tween

(
  • [items]
)

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Methods

addToTargets

(
  • items
)
chainable

Add Objects to targets attribute - assumes that the supplied Array will augment any existing targets array

Parameters:

  • items Array

    Array of Objects and/or Strings, can also be single Object or string

Returns:

this

addToTicker

(
  • item
)
chainable

Add tween to given ticker

If tween is already subscribed to a different ticker, the function will automatically unsubscribe from that ticker before subscribing to the new ticker

Parameters:

  • item String

    TICKERNAME to which this Tween will subscribe

Returns:

this

calculateEffectiveDuration

(
  • [item]
)
private chainable

Get the effective (millisecond number) duration for the tween

Parameters:

  • [item] String optional

    new time value; defaults to this.time

Returns:

this

calculateEffectiveTime

(
  • [item]
)
private chainable

Get the effective (millisecond number) time when tween will trigger

Parameters:

  • [item] String optional

    new time value; defaults to this.time

Returns:

this

clone

(
  • Object
)
chainable

Inherited from Base but overwritten in source\scrawlAnimation.js:2716

Create a clone of this Tween

Note: strongly advise every call to this function includes newly created anonymous functions for the action and revert attributes in the argument object - Scrawl's clone functionality does not clone function attributes!

Parameters:

  • Object Object

    containing key:value attributes

Returns:

a new copy of the Tween object

doSimpleUpdate

(
  • items
)
private

Perform a simple update

Parameters:

  • items Object

    Object sent by ticker

Returns:

always true

engineActions

() private

Tween engine helper object

get

(
  • item
)

Retrieve an attribute value. If the attribute value has not been set, then the default value for that attribute will be returned.

Parameters:

  • item String

    Attribute key

Returns:

Attribute value

Example:

var box = scrawl.makeBlock({
    width: 50,
    });
box.get('width');               //returns 50
box.get('height');              //returns 0
box.get('favouriteAnimal');     //returns undefined

getEndTime

() private

retrieve the completion time for the action

Returns:

Number

halt

()

Halt the tween's ticker

Returns:

this

kill

()

Remove this Tween from the scrawl library (including any self-created ticker associated with the tween)

Returns:

Always true

numberConvert

(
  • val
  • dim
)
private

Stamp helper function - convert string percentage values to numerical values

Parameters:

  • val String

    coordinate String

  • dim Number

    dimension value

Returns:

Number - value

parse

()

Turn the object into a JSON String

Returns:

object of object's currently set attributes

parseDefinitionsValue

(
  • value
)
private

setDefinitionsValues helper function

Parameters:

  • value String

    to be parsed; can also be a Number

Returns:

Array of parsed values in the form ['Suffix', Number]

removeFromTargets

(
  • items
)
chainable

Remove Objects from targets attribute - will not remove an object with no name and/or type attributes

Parameters:

  • items Array

    Array of Objects and/or Strings, can also be single Object or string

Returns:

this

removeFromTicker

(
  • item
)
chainable

Remove action from given ticker

Parameters:

  • item String

    TICKERNAME to which this Tween will unsubscribe

Returns:

this

resume

()

Resume the tween's ticker

Returns:

this

run

()

Start the tween's ticker from 0

Returns:

this

seekFor

()

seekFor a different relative point on the tween's ticker

Returns:

this

seekTo

()

seekTo a different specific point on the tween's ticker

Returns:

this

set

(
  • Object
)
chainable

Inherited from Base but overwritten in source\scrawlAnimation.js:2594

Set attributes

Parameters:

  • Object Object

    containing key:value attributes

Returns:

this

setDefinitionsValues

(
  • Object
)
private chainable

Calculate the effective values for definitions

Parameters:

  • Object Object

    containing key:value attributes

Returns:

this

setTargets

(
  • items
)
private chainable

Set targets attribute - assumes that the supplied Array will replace, not amend, any existing targets array

Parameters:

  • items Array

    Array of Objects and/or Strings, can also be single Object or string

Returns:

this

update

(
  • items
)
private

Investigate the data supplied by the ticker and, if necessary, invoke the action or revert functions, as appropriate

The object passed by the ticker has the following attributes:

  • tick - milliseconds since ticker started its run
  • reverseTick - milliseconds before ticker reaches the end of its run
  • willLoop - boolean indicating whether ticker is about to restart
  • next - boolean indicating whether this is the ticker's last update

Parameters:

  • items Object

    Object sent by ticker

Returns:

always true

updateCleanup

(
  • items
)
private

update cleanup

Parameters:

  • items Object

    Object sent by ticker

Returns:

always true

Properties

action

Function

Function to be called at the end of each tween recalculation - takes no arguments

Default: false

comment

String

Comment, for accessibility

Default: ''

definitions

Array

Array of Objects which define the actions this tween will take. The Objects must include the following attributes:

  • attribute - (required) a String of the attribute key value
  • start - (required) a Number or String value determining the point on the Ticker at which the tween will activate (eg: 100, '10%', '2px')
  • end - (required) a Number or String value determining the point on the Ticker at which the tween will deactivate (eg: 900, '90%', '50px')
  • engine - (optional) a String value supplying the name of the easing engine to use; default 'linear'
  • integer - (optional) a Boolean: when true, the calculated value will have Math.round() applied before targets are set; default false

This attribute can also accept a single Object as its value

Default: []

duration

Number

Duration - time required for tween to run

Default: 0

name

String

Unique identifier for each object; default: computer-generated String based on Object's type

order

Number

Sort order - for Actions that share the same time value on a given Ticker. Without a sort order, there will be no guarantee which actions with the same time value will be performed first

Default: 0

reversed

Boolean

Reversed - determines the directin in which the tween will run - true means that reverseTick values will be used for calculations; default false

Default: false

reverseOnCycleEnd

Boolean

Reversable flag - when true, the tween will reverse its direction of play as each ticker cycle completes; default false (will go back to beginning and play in the current direction)

Default: false

targets

Array

Array of Objects on which this Tween will perform its action and revert functions; if the array includes Strings, the constructor, set and clone functions will search for the Objects in the Scrawl library, checking sections (if they currently exist) in the following order:

  • entity, cell, pad, stack, element, point, group, design, animation, tween, anim, filter, image, force, spring, physics

This attribute can also accept a single Object or String as its value in the

Default: []

ticker

String

Ticker name If a Tween object is associated with a ticker, it will fire (or revert) at the appropriate point in the course of the ticker's run.

Default: ''

time

Number

Time - point (in milliseconds) following the start of the Tween's ticker when the tween will trigger

Default: 0

timestamp

String

Creation timestamp

Default: ''

title

String

Title, for accessibility

Default: ''

type

String final

Inherited from Base but overwritten in source\scrawlAnimation.js:2222

Default: 'Tween'