API Docs for: 6.0.1
Show:

Ticker Class

Extends Base
Module: scrawlAnimation

Ticker

Instantiation

  • scrawl.makeTicker()

Purpose

  • Defines a linear time sequence to which tweens and other actions can subscribe

Access

  • scrawl.animation.TICKERNAME - for the Ticker object

Ticker functions

  • Start a Ticker from 0 by calling the run() function on it.
  • Tickers can be stopped by calling the halt() function on it.
  • Start a Ticker from the point at which it was previously halted by calling the resume() function on it.
  • A Ticker can have its current tick amended by calling the seekTo() function on it.
  • A Ticker can be deleted by calling the kill() function on it.

Constructor

Ticker

(
  • [items]
)

Parameters:

  • [items] Object optional

    Key:value Object argument for setting attributes

Methods

changeSubscriberDirection

() private chainable

Bulk-change the playing direction for all subscribed tweens and actions

Returns:

this

clone

(
  • items
)
chainable

Clone a Scrawl.js object, optionally altering attribute values in the cloned object

Note that any callback or fn attribute functions will be referenced by the clone, not copied to the clone; these can be overwritten with new anonymous functions by including them in the items argument object

(This function is replaced by the path extension)

Parameters:

  • items Object

    Object containing attribute key:value pairs; will overwrite existing values in the cloned, but not the source, Object

Returns:

Cloned object

Example:

var box = scrawl.makeBlock({
    width: 50,
    height: 50
    });
var newBox = box.clone({
    height: 100
    });
newBox.get('width');        //returns 50
newBox.get('height');       //returns 100

complete

() chainable

Reset ticker to final conditions

Returns:

this

fn

(
  • [reverseOrder]
)
private chainable

Animation function

Parameters:

  • [reverseOrder] Boolean optional

    when true, perform update from last subscriber to first; default false

Returns:

this

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

halt

() chainable

Halt ticker

Returns:

this

kill

()

Remove this Ticker from the scrawl library

Returns:

Always true

killTweens

()

Remove this Ticker from the scrawl library (if argument is true), alongside any tweens associated with it

Returns:

true if argument is true; this otherwise (default)

makeTickerUpdateEvent

()

Make a new tickerupdate customEvent object

Returns:

customEvent object, or null if browser does not support custom events

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

recalculateEffectiveDuration

() private chainable

Recalculate the ticker's effective duration

Returns:

this

reset

() chainable

Reset ticker to initial conditions

Returns:

this

resume

() chainable

Resume ticker

Returns:

this

reverse

() chainable

Reverse tracker direction and continue playing

Returns:

this

run

() chainable

Start ticker from 0

Returns:

this

seekFor

(
  • seekfor
  • [resume]
)
chainable

seekFor a different relative point on the ticker

Parameters:

  • seekfor Number

    time in milliseconds from current tick; default 0 - no change

  • [resume] Boolean optional
    • flag - when true, the resume() function will trigger; false (default) triggers a single call to the fn() function

Returns:

this

seekTo

(
  • seekto
  • [resume]
)
chainable

seekTo a different specific point on the ticker

Parameters:

  • seekto Number

    time in milliseconds from start of ticker; default 0 - effectively sets ticker back to starting conditions

  • [resume] Boolean optional
    • flag - when true, the resume() function will trigger; false (default) triggers a single call to the fn() function

Returns:

this

set

(
  • [items]
)
chainable

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

Set attributes - restricted so that only subscribers, order, duration and cycles attributes can be amended

Parameters:

  • [items] Object optional

    Object containing key:value parameters for updating

Returns:

this

setEffectiveDuration

() private chainable

Set the ticker's effective duration from this.duration

Returns:

this

sortSubscribers

() private chainable

Order subscriber tweens by their time attributes, lowest to highest

Returns:

this

subscribe

(
  • [items]
)
chainable

Add a Tween or Action's name to the Ticker's .subscribers array

Parameters:

  • [items] Array optional

    Array containing String name values, or Objects with a .name attribute; alternatively can be a single String or Object

Returns:

this

unsubscribe

(
  • [items]
)
chainable

Remove a Tween or Action's name from the Ticker's .subscribers array

Parameters:

  • [items] Array optional

    Array containing String name values, or Tween/Action Objects with a .name attribute; alternatively can be a single String or Object

Returns:

this

updateSubscribers

(
  • items
  • [reversed]
)
private chainable

Change the supplied attributes for each subscribed tween and action

Parameters:

  • items Object

    Object containing key:value parameters for updating

  • [reversed] Boolean optional

    when true, perform update from last subscriber to first; default false

Returns:

this

Properties

comment

String

Comment, for accessibility

Default: ''

cycles

Number

Number of times to cycle the ticker:

  • 0 - the ticker will repeat until stopped
  • 0 - the ticker will repeat the given number of cycles, then stop

Default action is to run the ticker once, then stop it

Default: 1

duration

Number

Ticker length, in milliseconds

If no duration is set, Ticker will set the last subscribed object's end time as its effective duration

Default: 0

eventChoke

Number

Event choke value

A ticker will trigger a timeupdate event on the document object as it runs, with details of the ticker's current state including:

  • name
  • tick (milliseconds)

If the eventChoke attribute is set to 0 (default), no tickerupdate events are fired as the ticker runs - thus this value needs to be set explicitly to make the Ticker emit events. Otherwise, this value represents the time between each event emission

Default: 0

killOnComplete

Boolean

When set to true, Ticker will delete itself and any associated tweens from the scrawl library

Default: false

name

String

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

order

Number

Animation order

Objects in the animation loop are sorted by their order values, and run as part of the animation loop from lowest to highest order value. There is no guarantee in which order objects with the same order value will run during each animation loop

Default: 0

subscribers

Array

Array of String names of tween and action subscribers to this Ticker

Default: []

timestamp

String

Creation timestamp

Default: ''

title

String

Title, for accessibility

Default: ''

type

String final

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

Default: 'Ticker'