-
Notifications
You must be signed in to change notification settings - Fork 1
2. API reference
Anton Kosykh edited this page Jan 18, 2018
·
6 revisions
import NanoTween from 'nanotween'
import { linear } from 'nanotween/easings'
const tween = NanoTween()
.duration(10000) // duration (in ms)
.repeat(5) // Repeats count (default - 0. You can pass Infinity for infinite loop)
.easing(linear) // Easing function (default - linear. For more info - see "2. Easings")
.reverse() // Reverse animation (calling twice returns to normal direction)NanoTween tweening mechanics are simple:
- progress is a value from 0 to 1
- Each
NanoTween.update(time)increases progress value by(time - prevTime) / tweenDuration - Then easing function is applied to progress
- Result value is emited in
updateevent.
tween.start() // Start tweening (begins from 0)
tween.stop() // Stop tweening and go to the end
tween.play() // Play tweening from current progress
tween.pause() // Pause tweening on current progress
tween.reverse() // Reverse animation direction. Progress always goes 0->1 even if tween is reversed
tween.set(progress) // Sets progresss (float number from 0 to 1)
tween.complete() // Complete one tweening step (if it's repeating - it will continue from the next step)
tween.remove() // Completely removes tween object from queue. Animation progress will be pausedtween.convert(cb) // Applies callback to progress before emiting update event. Can be stacked
tween.use(enhancer) // Calls enhancer with tween instance. Use it for plugins or reusable tweensEvents are provided by nanoevents
tween.on(eventName, cb)Some events has meta info. To not copy-paste i will write here what it contains:
-
progress- progress of tween (from 0 to 1) -
progressMatched- progress after easing function applied -
value- current value (like progress but with converters applied) -
remaining- repeats count remaining -
completed- how many iterations are completed -
remainingTime- time (in ms) before tweening is completed. -
completedTime- time (in ms) before tweening start (pauses not included)
-
eventName- name of needed event -
cb- function that will be called with arguments from event You can also add several handlers to the single event
Whenever tween.start() is called
None
Whenever tween.stop() is called
None
Whenever tween.play() is called
-
meta- object with meta info
Whenever tween.pause() is called
-
meta- object with meta info
- On
.set(progress)call - On
NanoTween.update()call if tween is running (because it calls.set(progress)) - On
.start()(such as.set(0)) and stop (such as.set(1)) call - On
.complete()call or when tween is finished (because it calls.set(1)and then.set(0))
-
progress- progress of tween with applied converters (if no converters - returns number from 0 to 1) -
meta- object with meta info
Whenever one iteration of repeating tween is completed
-
ticks- count of repeats remaining -
meta- object with meta info
Whenever tween is completed
None