## TWEEN : object Lightweight, effecient and modular ES6 version of tween.js **Kind**: global namespace **License**: MIT **Copyright**: 2019 @dalisoft and es6-tween contributors **Example** ```js // ES6 const {add, remove, isRunning, autoPlay} = TWEEN ``` * [TWEEN](#TWEEN) : object * [.Easing](#TWEEN.Easing) : object * [.Interpolation](#TWEEN.Interpolation) : object * [.Interpolator](#TWEEN.Interpolator) ⇒ function * [.Timeline](#TWEEN.Timeline) : object * [.Tween](#TWEEN.Tween) : object * [.Tween#setMaxListener(count)](#TWEEN.Tween.Tween+setMaxListener) * [.Tween#on(event, callback)](#TWEEN.Tween.Tween+on) * [.Tween#once(event, callback)](#TWEEN.Tween.Tween+once) * [.Tween#off(event, callback)](#TWEEN.Tween.Tween+off) * [.Tween#emit(event)](#TWEEN.Tween.Tween+emit) * [.Tween#isPlaying()](#TWEEN.Tween.Tween+isPlaying) ⇒ boolean * [.Tween#isStarted()](#TWEEN.Tween.Tween+isStarted) ⇒ boolean * [.Tween#reverse([state])](#TWEEN.Tween.Tween+reverse) * [.Tween#reversed()](#TWEEN.Tween.Tween+reversed) ⇒ boolean * [.Tween#pause()](#TWEEN.Tween.Tween+pause) * [.Tween#play()](#TWEEN.Tween.Tween+play) * [.Tween#restart([noDelay])](#TWEEN.Tween.Tween+restart) * ~~[.Tween#seek(time, [keepPlaying])](#TWEEN.Tween.Tween+seek)~~ * ~~[.Tween#duration(amount)](#TWEEN.Tween.Tween+duration)~~ * [.Tween#to(properties, [duration])](#TWEEN.Tween.Tween+to) * [.Tween#start(time)](#TWEEN.Tween.Tween+start) * [.Tween#stop()](#TWEEN.Tween.Tween+stop) * [.Tween#delay(amount)](#TWEEN.Tween.Tween+delay) * [.Tween#chainedTweens(arguments)](#TWEEN.Tween.Tween+chainedTweens) * [.Tween#repeat(amount)](#TWEEN.Tween.Tween+repeat) * [.Tween#reverseDelay(amount)](#TWEEN.Tween.Tween+reverseDelay) * [.Tween#yoyo(state, [_easingReverse])](#TWEEN.Tween.Tween+yoyo) * [.Tween#easing(_easingFunction)](#TWEEN.Tween.Tween+easing) * [.Tween#interpolation(_interpolationFunction)](#TWEEN.Tween.Tween+interpolation) * [.Tween#update(time, [preserve], [forceTime])](#TWEEN.Tween.Tween+update) * [.Plugins](#TWEEN.Plugins) : object * [.now](#TWEEN.now) ⇒ * [.add(tween)](#TWEEN.add) * [.onTick(fn)](#TWEEN.onTick) * [.FrameThrottle(frameCount)](#TWEEN.FrameThrottle) * [.ToggleLagSmoothing(state)](#TWEEN.ToggleLagSmoothing) * [.autoPlay(state)](#TWEEN.autoPlay) * [.removeAll()](#TWEEN.removeAll) * [.get(tween)](#TWEEN.get) ⇒ Tween * [.has(tween)](#TWEEN.has) ⇒ Boolean * [.remove(tween)](#TWEEN.remove) * [.update([time], [preserve])](#TWEEN.update) * [.isRunning()](#TWEEN.isRunning) ⇒ Boolean * [.isLagSmoothing()](#TWEEN.isLagSmoothing) ⇒ Boolean ### TWEEN.Easing : object List of full easings **Kind**: static namespace of [TWEEN](#TWEEN) **Example** ```js import {Tween, Easing} from 'es6-tween' // then set via new Tween({x:0}).to({x:100}, 1000).easing(Easing.Quadratic.InOut).start() ``` ### TWEEN.Interpolation : object List of full Interpolation **Kind**: static namespace of [TWEEN](#TWEEN) **Example** ```js import {Interpolation, Tween} from 'es6-tween' let bezier = Interpolation.Bezier new Tween({x:0}).to({x:[0, 4, 8, 12, 15, 20, 30, 40, 20, 40, 10, 50]}, 1000).interpolation(bezier).start() ``` ### TWEEN.Interpolator ⇒ function Tween helper for plugins **Kind**: static namespace of [TWEEN](#TWEEN) **Returns**: function - Returns function that accepts number between `0-1` | Param | Type | Description | | --- | --- | --- | | a | any | Initial position | | b | any | End position | ### TWEEN.Timeline : object Timeline main constructor. It works same as `Tween` instance, using `.repeat`, `.restart` or `etc` works like a `Tween`, so please see `Tween` class for methods **Kind**: static namespace of [TWEEN](#TWEEN) **Extends**: Tween | Param | Type | Description | | --- | --- | --- | | [params] | Object | Default params for new tweens | **Example** ```js let tl = new Timeline({delay:200}) ``` ### TWEEN.Tween : object Tween main constructor **Kind**: static namespace of [TWEEN](#TWEEN) | Param | Type | Description | | --- | --- | --- | | node | Object \| Element | Node Element or Tween initial object | | [object] | Object | If Node Element is using, second argument is used for Tween initial object | **Example** ```js let tween = new Tween(myNode, {width:'100px'}).to({width:'300px'}, 2000).start() ``` * [.Tween](#TWEEN.Tween) : object * [.Tween#setMaxListener(count)](#TWEEN.Tween.Tween+setMaxListener) * [.Tween#on(event, callback)](#TWEEN.Tween.Tween+on) * [.Tween#once(event, callback)](#TWEEN.Tween.Tween+once) * [.Tween#off(event, callback)](#TWEEN.Tween.Tween+off) * [.Tween#emit(event)](#TWEEN.Tween.Tween+emit) * [.Tween#isPlaying()](#TWEEN.Tween.Tween+isPlaying) ⇒ boolean * [.Tween#isStarted()](#TWEEN.Tween.Tween+isStarted) ⇒ boolean * [.Tween#reverse([state])](#TWEEN.Tween.Tween+reverse) * [.Tween#reversed()](#TWEEN.Tween.Tween+reversed) ⇒ boolean * [.Tween#pause()](#TWEEN.Tween.Tween+pause) * [.Tween#play()](#TWEEN.Tween.Tween+play) * [.Tween#restart([noDelay])](#TWEEN.Tween.Tween+restart) * ~~[.Tween#seek(time, [keepPlaying])](#TWEEN.Tween.Tween+seek)~~ * ~~[.Tween#duration(amount)](#TWEEN.Tween.Tween+duration)~~ * [.Tween#to(properties, [duration])](#TWEEN.Tween.Tween+to) * [.Tween#start(time)](#TWEEN.Tween.Tween+start) * [.Tween#stop()](#TWEEN.Tween.Tween+stop) * [.Tween#delay(amount)](#TWEEN.Tween.Tween+delay) * [.Tween#chainedTweens(arguments)](#TWEEN.Tween.Tween+chainedTweens) * [.Tween#repeat(amount)](#TWEEN.Tween.Tween+repeat) * [.Tween#reverseDelay(amount)](#TWEEN.Tween.Tween+reverseDelay) * [.Tween#yoyo(state, [_easingReverse])](#TWEEN.Tween.Tween+yoyo) * [.Tween#easing(_easingFunction)](#TWEEN.Tween.Tween+easing) * [.Tween#interpolation(_interpolationFunction)](#TWEEN.Tween.Tween+interpolation) * [.Tween#update(time, [preserve], [forceTime])](#TWEEN.Tween.Tween+update) #### Tween.Tween#setMaxListener(count) Sets max `event` listener's count to Events system **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Default | Description | | --- | --- | --- | --- | | count | number | 15 | Event listener's count | #### Tween.Tween#on(event, callback) Adds `event` to Events system **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | event | string | Event listener name | | callback | function | Event listener callback | #### Tween.Tween#once(event, callback) Adds `event` to Events system. Removes itself after fired once **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | event | string | Event listener name | | callback | function | Event listener callback | #### Tween.Tween#off(event, callback) Removes `event` from Events system **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | event | string | Event listener name | | callback | function | Event listener callback | #### Tween.Tween#emit(event) Emits/Fired/Trigger `event` from Events system listeners **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | event | string | Event listener name | #### Tween.Tween#isPlaying() ⇒ boolean **Kind**: static method of [Tween](#TWEEN.Tween) **Returns**: boolean - State of playing of tween **Example** ```js tween.isPlaying() // returns `true` if tween in progress ``` #### Tween.Tween#isStarted() ⇒ boolean **Kind**: static method of [Tween](#TWEEN.Tween) **Returns**: boolean - State of started of tween **Example** ```js tween.isStarted() // returns `true` if tween in started ``` #### Tween.Tween#reverse([state]) Reverses the tween state/direction **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | [state] | boolean | Set state of current reverse | **Example** ```js tween.reverse() ``` #### Tween.Tween#reversed() ⇒ boolean **Kind**: static method of [Tween](#TWEEN.Tween) **Returns**: boolean - State of reversed **Example** ```js tween.reversed() // returns `true` if tween in reversed state ``` #### Tween.Tween#pause() Pauses tween **Kind**: static method of [Tween](#TWEEN.Tween) **Example** ```js tween.pause() ``` #### Tween.Tween#play() Play/Resume the tween **Kind**: static method of [Tween](#TWEEN.Tween) **Example** ```js tween.play() ``` #### Tween.Tween#restart([noDelay]) Restarts tween from initial value **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | [noDelay] | boolean | If this param is set to `true`, restarts tween without `delay` | **Example** ```js tween.restart() ``` #### ~~Tween.Tween#seek(time, [keepPlaying])~~ ***Deprecated*** Seek tween value by `time`. Note: Not works as excepted. PR are welcome **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | time | Time | Tween update time | | [keepPlaying] | boolean | When this param is set to `false`, tween pausing after seek | **Example** ```js tween.seek(500) ``` #### ~~Tween.Tween#duration(amount)~~ ***Deprecated*** Sets tween duration **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | amount | number | Duration is milliseconds | **Example** ```js tween.duration(2000) ``` #### Tween.Tween#to(properties, [duration]) Sets target value and duration **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Default | Description | | --- | --- | --- | --- | | properties | object | | Target value (to value) | | [duration] | number \| Object | 1000 | Duration of tween | **Example** ```js let tween = new Tween({x:0}).to({x:100}, 2000) ``` #### Tween.Tween#start(time) Start the tweening **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | time | number \| string | setting manual time instead of Current browser timestamp or like `+1000` relative to current timestamp | **Example** ```js tween.start() ``` #### Tween.Tween#stop() Stops the tween **Kind**: static method of [Tween](#TWEEN.Tween) **Example** ```js tween.stop() ``` #### Tween.Tween#delay(amount) Set delay of tween **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | amount | number | Sets tween delay / wait duration | **Example** ```js tween.delay(500) ``` #### Tween.Tween#chainedTweens(arguments) Chained tweens **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | arguments | any | Arguments list | **Example** ```js tween.chainedTweens(tween1, tween2) ``` #### Tween.Tween#repeat(amount) Sets how times tween is repeating **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | amount | amount | the times of repeat | **Example** ```js tween.repeat(5) ``` #### Tween.Tween#reverseDelay(amount) Set delay of each repeat alternate of tween **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | amount | number | Sets tween repeat alternate delay / repeat alternate wait duration | **Example** ```js tween.reverseDelay(500) ``` #### Tween.Tween#yoyo(state, [_easingReverse]) Set `yoyo` state (enables reverse in repeat) **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | state | boolean | Enables alternate direction for repeat | | [_easingReverse] | function | Easing function in reverse direction | **Example** ```js tween.yoyo(true) ``` #### Tween.Tween#easing(_easingFunction) Set easing **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | _easingFunction | function | Easing function, applies in non-reverse direction if Tween#yoyo second argument is applied | **Example** ```js tween.easing(Easing.Elastic.InOut) ``` #### Tween.Tween#interpolation(_interpolationFunction) Set interpolation **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | _interpolationFunction | function | Interpolation function | **Example** ```js tween.interpolation(Interpolation.Bezier) ``` #### Tween.Tween#update(time, [preserve], [forceTime]) Updates initial object to target value by given `time` **Kind**: static method of [Tween](#TWEEN.Tween) | Param | Type | Description | | --- | --- | --- | | time | Time | Current time | | [preserve] | boolean | Prevents from removing tween from store | | [forceTime] | boolean | Forces to be frame rendered, even mismatching time | **Example** ```js tween.update(100) ``` ### TWEEN.Plugins : object The plugins store object **Kind**: static namespace of [TWEEN](#TWEEN) **Example** ```js let num = Plugins.num = function (node, start, end) { return t => start + (end - start) * t } ``` ### TWEEN.now ⇒ Get browser/Node.js current time-stamp **Kind**: static constant of [TWEEN](#TWEEN) **Returns**: Normalised current time-stamp in milliseconds **Example** ```js TWEEN.now ``` ### TWEEN.add(tween) Adds tween to list **Kind**: static method of [TWEEN](#TWEEN) | Param | Type | Description | | --- | --- | --- | | tween | Tween | Tween instance | **Example** ```js let tween = new Tween({x:0}) tween.to({x:200}, 1000) TWEEN.add(tween) ``` ### TWEEN.onTick(fn) Adds ticker like event **Kind**: static method of [TWEEN](#TWEEN) | Param | Type | Description | | --- | --- | --- | | fn | function | callback | **Example** ```js TWEEN.onTick(time => console.log(time)) ``` ### TWEEN.FrameThrottle(frameCount) Sets after how much frames empty updating should stop **Kind**: static method of [TWEEN](#TWEEN) | Param | Type | Default | Description | | --- | --- | --- | --- | | frameCount | number | 120 | count of frames that should stop after all tweens removed | **Example** ```js TWEEN.FrameThrottle(60) ``` ### TWEEN.ToggleLagSmoothing(state) Handle lag, useful if you have rendering Canvas or DOM objects or using es6-tween plugins **Kind**: static method of [TWEEN](#TWEEN) | Param | Type | Default | Description | | --- | --- | --- | --- | | state | number | true | handle lag state | **Example** ```js TWEEN.ToggleLagSmoothing(false) ``` ### TWEEN.autoPlay(state) Runs update loop automaticlly **Kind**: static method of [TWEEN](#TWEEN) | Param | Type | Description | | --- | --- | --- | | state | Boolean | State of auto-run of update loop | **Example** ```js TWEEN.autoPlay(true) ``` ### TWEEN.removeAll() Removes all tweens from list **Kind**: static method of [TWEEN](#TWEEN) **Example** ```js TWEEN.removeAll() // removes all tweens, stored in global tweens list ``` ### TWEEN.get(tween) ⇒ Tween **Kind**: static method of [TWEEN](#TWEEN) **Returns**: Tween - Matched tween | Param | Type | Description | | --- | --- | --- | | tween | Tween | Tween Instance to be matched | **Example** ```js TWEEN.get(tween) ``` ### TWEEN.has(tween) ⇒ Boolean **Kind**: static method of [TWEEN](#TWEEN) **Returns**: Boolean - Status of Exists tween or not | Param | Type | Description | | --- | --- | --- | | tween | Tween | Tween Instance to be matched | **Example** ```js TWEEN.has(tween) ``` ### TWEEN.remove(tween) Removes tween from list **Kind**: static method of [TWEEN](#TWEEN) | Param | Type | Description | | --- | --- | --- | | tween | Tween | Tween instance | **Example** ```js TWEEN.remove(tween) ``` ### TWEEN.update([time], [preserve]) Updates global tweens by given time **Kind**: static method of [TWEEN](#TWEEN) | Param | Type | Description | | --- | --- | --- | | [time] | number | Timestamp | | [preserve] | Boolean | Prevents tween to be removed after finish | **Example** ```js TWEEN.update(500) ``` ### TWEEN.isRunning() ⇒ Boolean The state of ticker running **Kind**: static method of [TWEEN](#TWEEN) **Returns**: Boolean - Status of running updates on all tweens **Example** ```js TWEEN.isRunning() ``` ### TWEEN.isLagSmoothing() ⇒ Boolean Returns state of lag smoothing handling **Kind**: static method of [TWEEN](#TWEEN) **Returns**: Boolean - Status of lag smoothing state **Example** ```js TWEEN.isRunning() ```