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